title: How to find focused React component? (like document.activeElement)
body: <p>If you had 500 components, each with a <code>ref</code>, how would you find which component has the user's focus? All components with a <code>ref</code> are focusable elements like <code>&lt;input /&gt;</code>, <code>&lt;textarea /&gt;</code>, etc. For simplicity, all of the <code>refs</code> are accessible from a single top-level component.</p>
  
  <p>This is very simple if your React components have <code>classNames</code> - but if you want to find the <code>ref</code> of a <code>document.activeElement</code>, if there some way to achieve that without having to resort to classNames?</p>
  
  <p>To touch on why we don't have <code>classNames</code>, we're using <code>JSS</code> via <code>emotion</code>. To have to manually assign everything a <code>className</code> just for this purpose would be rather absurd. No obvious alternative has occurred to me.</p>