title: How to send State in Styling API as a Props for Custom Resuable ReactSelect?
body: <p>I'm having global ReactSelect with default styling. I need to override just one of the styling's property. Consider the following as the Reusable CustomReactSelect Component.</p>
  <pre><code>custom-react-select.tsx
  
  export const CustomReactSelect = (props) =&gt; {
  const defaultStyle = {
   control: (provided, state) =&gt; ({
              ...
              backgroundColor: (state.isDisabled) ? '--theia-editorGroupHeader-tabsBackground' : 'var(--theia-input-background)',
              fontSize: 'var(--theia-ui-font-size1)',
              ...
          }),
  } 
   ...
  return &lt;Select 
                ...
                styles = {...defaultStyle,...props.style}
                ...
                /&gt;
  }
  </code></pre>
  <p>Consider a situation where I just need to override the background of the control Style in a similar fashion.</p>
  <pre><code>const overrideControlStyle = {
          backgroundColor: (state.isFocused) ? 'red' : 'black'
  }
  </code></pre>
  <p>I only need the override the backgroundColor, in the end the props that should be sent to the React Select should be as follows,</p>
  <pre><code>Sent Props...
  {
   control: (provided, state) =&gt; ({
              ...
              backgroundColor: (state.isFocused) ? 'red' : 'black',
              fontSize: 'var(--theia-ui-font-size1)',
              ...
          }),
  } 
  </code></pre>