React pseudo selector inline styling : <p>What do you think are good ways to handle styling pseudo selectors with React inline styling? What are the gains and drawbacks?</p>

<p>Say you have a styles.js file for each React component. You style your component with that styles file. But then you want to do a hover effect on a button (or whatever). </p>

<p>One way is to have a global CSS file and handle styling pseudo selectors that way. Here, the class 'label-hover' comes from a global CSS file and styles.label comes from the components style file.</p>

<pre><code>&lt;ControlLabel style={styles.label} className='label-hover'&gt;
    Email
&lt;/ControlLabel&gt;
</code></pre>

<p>Another way is to style the components based on certain conditions (that might be triggered by state or whatever). Here, if hovered state is true, use styles.button and styles.buttonHover otherwise just use styles.button.</p>

<pre><code>&lt;section 
  style={(hovered !== true) ?
     {styles.button} : 
     {...styles.button, ...styles.buttonHover }&gt;
&lt;/section&gt;
</code></pre>

<p>Both approaches feels kind of hacky. If anyone has a better approach, I'd love to know. Thanks!</p>
