title: Inline CSS styles in React: how to implement a:hover?
body: <p>I quite like the <a href="https://speakerdeck.com/vjeux/react-css-in-js" rel="noreferrer">inline CSS pattern in React</a> and decided to use it.</p>
  
  <p>However, you can't use the <code>:hover</code> and similar selectors. So what's the best way to implement highlight-on-hover while using inline CSS styles?</p>
  
  <p>One suggestion from #reactjs is to have a <code>Clickable</code> component and use it like this:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>&lt;Clickable&gt;
      &lt;Link /&gt;
  &lt;/Clickable&gt;
  </code></pre>
  
  <p>The <code>Clickable</code> has a <code>hovered</code> state and passes it as props to the Link. However, the <code>Clickable</code> (the way I implemented it) wraps the <code>Link</code> in a <code>div</code> so that it can set <code>onMouseEnter</code> and <code>onMouseLeave</code> to it. This makes things a bit complicated though (e.g. <code>span</code> wrapped in a <code>div</code> behaves differently than <code>span</code>).</p>
  
  <p>Is there a simpler way?</p>