title: How to style the selected item in React-Select when using a custom component?
body: <p>We're using a custom Emotion component, and the documentation says that the same properties are passed to customer components, but they don't seem to be. <code>isSelected</code> and other properties don't seem to be there either.</p>
  
  <pre class="lang-js prettyprint-override"><code>const Option = styled.div`
    color: #444;
    font-family: 'Open Sans', 'Arial', Sans-Serif !important;
    font-size: 0.6875rem;
    text-indent: 6px;
    line-height: 1.85;
  
    &amp;:hover {
      background: #9cbac2;
    }
  
    ${props =&gt; {
      return css`
        background: ${props.isSelected ? 'red' : '#eee'}; // props.isSelected is not defined
      `;
    }}
  `;
  
  
  &lt;Select
    components={{
      Option: ({ children, innerProps, innerRef }) =&gt; (
        &lt;Option ref={innerRef} {...innerProps}&gt;
          {children}
        &lt;/Option&gt;
      ),
    }}
    styles={reactSelectStyles} // Tried styling Option in the styles object, but that didn't work with a custom component
  /&gt;
  </code></pre>