title: react-select styling issues with style props
body: <p>I wanted to use react-select and ran into a whole array of issues after I changed the page background color from white to custom. (The issues aren't so evident on the white background as on react-select's github page)</p>
  
  <p>I'm doing the above through styles prop as the className prop wouldn't work properly.</p>
  
  <p>Here is the styles prop.</p>
  
  <pre><code>const colourStyles = {
      control: styles =&gt; ({ ...styles, backgroundColor: '#023950', color: 'white', border: 0 }),
      option: (styles) =&gt; {
          return {
              backgroundColor: '#023950',
              color: 'white'
          };
      },
      singleValue: styles =&gt; ({ ...styles, color: 'white' }),
  };
  </code></pre>
  
  <p>Here is a list of issues and if someone could help out on how to fix them. Please refer to attached image.</p>
  
  <ol>
  <li>Notice the gap between the dropdown and the options (when you click on the dropdown to open the options)
  
  <ul>
  <li>If you see here, <a href="http://jedwatson.github.io/react-select/" rel="nofollow noreferrer">http://jedwatson.github.io/react-select/</a>, there is no gap but you also can't see the source code. Clicking the source link gives a 404.</li>
  <li>All demos here, <a href="https://react-select.com/styles" rel="nofollow noreferrer">https://react-select.com/styles</a>, have this gap problem.</li>
  </ul></li>
  <li>There is a white gap (within the options itself) at the top and bottom. This is different from the gap from the dropdown as mentioned in point 1. That gap is transparent showing what's behind. This one is white.</li>
  <li>A long text resulted in options results in the whole options box having a weird whitespace issue. Is there a way to clip the text and turn it into ellipsis instead of making the options box wider and have horizontal scroll?</li>
  <li>Related to the above problem. How to turn off horizontal scroll. Want text clipping instead.</li>
  <li>Regarding the problem with using className prop, the class does get applied. However only to 1 of the topmost divs. It doesn't apply to the children div, which end up staying white in backgroundColor.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/EmCNj.png" rel="nofollow noreferrer">react-select-styling-issues</a></p>