title: Setting the font-family of the input field of a react-select
body: <p>So I'm trying to style the input field of a react-select component. Unfortunately, the font-family is being overwritten by the standard input element since the styles are being applied to the wrapper div and not the input field itself.</p>
  
  <pre><code>input: () =&gt; ({
    fontFamily: `${theme.fonts.tabs.family} !important`,
    fontWeight: theme.fonts.tabs.weight,
    fontSize: 18,
    color: theme.colors.secondary,
    height: 24
  }),
  </code></pre>
  
  <p>How would I go about changing the fontFamily without using class names?</p>
  
  <p>What this code produces
  <a href="https://i.stack.imgur.com/DcPgr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DcPgr.png" alt="What this code produces"></a>
  What I want
  <a href="https://i.stack.imgur.com/NAyPx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NAyPx.png" alt="What I want"></a></p>