title: Inline update to a custom react-select styles object
body: <p>We have a custom style for a select widget built using <a href="https://react-select.com/home" rel="nofollow noreferrer">react-select</a>, called <code>darkSelectStyles</code>, which is used like this:</p>
  <pre><code>&lt;Select
      isMulti
      styles={darkSelectStyles}
      value={ourValuesArray}
      onChange={ourHandlerFunction}
      options={ourSelectOptions}
  /&gt;
  </code></pre>
  <p><code>darkSelectStyles</code> is an object of functions, where each function returns the styles for a specific part of the select, and we'd like to make an inline update to the styles for the <code>control</code> part of the select. Something like:</p>
  <pre><code>const updatedStyles = {
      ...darkSelectStyles,
      control: (provided) =&gt; ({
          ...provided,
          minWidth: '300px'
      })   
  }
  </code></pre>
  <p>However this completely replaces what we had previously for the <code>control</code> styling function... This is what our <code>darkSelectStyles</code> object looks like (note it already has 7-8 styles on <code>control</code>, which are lost in the above example):</p>
  <pre><code>export const darkSelectStyles = {
      container: (base) =&gt; ({
          ...base,
          display: 'inline-block'
      }),
      control: (provided, state) =&gt; ({
          ...provided,
          minHeight: '5px',
          fontSize: '1.05em',
          cursor: 'pointer',
          boxShadow: 'none',
          borderRadius: 5,
          border: 'none',
          backgroundColor: state.isDisabled ? 'rgba(167, 0, 0, 0.45)' : null,
          '&amp;:hover': {
              backgroundColor: '#EEEEEE'
          }
      }),
      option: (provided) =&gt; ({
          ...provided,
          cursor: 'pointer',
          padding: '2px 6px 3px 6px',
          fontSize: '0.95em',
          marginTop: 0
      }),
      menu: (provided) =&gt; ({
          ...provided,
          backgroundColor: 'white',
          border: '1px solid #222222',
          boxShadow: cbbBoxShadow,
          zIndex: 999
      }),
      menuList: (provided) =&gt; ({
          ...provided,
          color: '#222222'
      }),
      singleValue: (provided, state) =&gt; ({
          ...provided,
          maxWidth: 'none',
          position: 'static',
          transform: 'none',
  
          // left: 0,
          color: state.isDisabled ? 'white' : '#222222',
          fontWeight: 700,
          overflow: 'initial'
      }),
      valueContainer: (provided) =&gt; ({ 
          ...provided, paddingBottom: 
          '0px', 
          paddingRight: '0px' 
      }),
      input: (provided) =&gt; ({
          ...provided,
          color: '#EEEEEE' 
      }),
      indicatorSeparator: () =&gt; ({ display: 'none' }),
      dropdownIndicator: (provided, state) =&gt; ({
          ...provided,
          padding: '0px 6px 0 2px',
          color: state.isDisabled ? 'white' : '#222222'
      })
  };
  </code></pre>
  <p>How can I fix the <code>updatedStyles</code> function to handle the new width without losing the other styles?</p>
  <h2>Edit</h2>
  <p>We could change <code>darkSelectStyles</code> into a function that takes parameters (minWidth) and returns an object with all of the functions, however this approach could become quite messy if a lot of parameters are used to set styles for different parts of the select widget...</p>