First, one solution for the problem of classes clashing is using inline styles, that is, setting styles with an element's style property instead of a separate CSS file, given the following HTML and CSS snippet:

// CSS style sheet 
.root { 
  color: white; 
  background-image: url(bg.png); 
  -webkit-transition: all .5s; 
  transition: all .5s; 
} 
 
// HTML fragment 
<div class="root">My Component</div> 

We could rewrite it with React and inline styles as follows:

const style = { 
  root: { 
    color: 'white', 
    WebkitTransition: 'all .5s', 
    transition: 'all .5s'  
  } 
}; 
 
functionMyComponent({ imageUrl }) { 
  style.root.backgroundImage = `url(${imageUrl})`; 
  return<div style={style.root}>My Component</div>; 
} 

You just specify styles with an object whose key is the camel case version of the style name, and whose value is the style's value, usually a string. The camel case is used to make it consistent with other JavaScript...