A package called styled-components
can solve this problem in an ELEGANT way.
Reference
Example
const styled = styled.default_x000D_
const Square = styled.div`_x000D_
height: 120px;_x000D_
width: 200px;_x000D_
margin: 100px;_x000D_
background-color: green;_x000D_
cursor: pointer;_x000D_
position: relative;_x000D_
&:hover {_x000D_
background-color: red;_x000D_
};_x000D_
`_x000D_
class Application extends React.Component {_x000D_
render() {_x000D_
return (_x000D_
<Square>_x000D_
</Square>_x000D_
)_x000D_
}_x000D_
}_x000D_
_x000D_
/*_x000D_
* Render the above component into the div#app_x000D_
*/_x000D_
ReactDOM.render(<Application />, document.getElementById('app'));
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>_x000D_
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>_x000D_
<div id='app'></div>
_x000D_