React

HTML

<div id="the-mount"><div class="header--leonardo"}><p>leonardo</p></div></div>

CSS

body {
  background-color: white;
}
.header--leonardo {
  color: blue;
}
.header--donatello {
  color: purple;
}

React

function Header(props) {
	const classes = `header--${props.name}`;
	return (
  	<div className={classes}>
  	  <p>{props.name}</p>
  	</div>
  );
}

ReactDOM.hydrate(<Header name="leonardo" />, document.querySelector("#the-mount"), () => {
	setTimeout(() => {
  	ReactDOM.render(<Header name="donatello" />, document.querySelector("#the-mount"));
  }, 5000);
});