title: How to use typescript with the definition of custom styles for a select using react-select
body: <p>I'd like to know how to nicely add types to a Select using react-select.</p>
  <p>The component so far looks like this:</p>
  <pre><code>const Select: React.FC&lt;Select&gt; = (
    {defaultValue, onChange, options}: Select) =&gt; (
    &lt;ReactSelect
      styles={selectStyles}
      …
    &lt;/ReactSelect&gt;
  </code></pre>
  <p>and the definition of <code>selectStyles</code>:</p>
  <pre><code>interface HoverProps {
    bowShadow: string
    border: string
  }
  
  interface ControlComponentCSSProperties extends CSSProperties {
    '&amp;:hover': HoverProps
  }
  
  const selectStyles = {
    control: (
      provided: CSSProperties,
      state: Props&lt;{label: string; value: string}&gt; | Props&lt;Record&lt;string, unknown&gt;&gt;
    ): ControlComponentCSSProperties =&gt; ({
      ...provided,
      '&amp;:hover': {
        bowShadow: 'none',
        border: 'none',
      },
      border: 'none',
      borderRadius: input.border.radius,
      borderBottomLeftRadius: state.menuIsOpen ? 0 : input.border.radius,
      borderBottomRightRadius: state.menuIsOpen ? 0 : input.border.radius,
      …
  </code></pre>
  <p>This passes <code>tsc</code> but surely there are simpler ways to type this <code>selectStyles</code> object.</p>
  <p>Would appreciate your help pointing me in a better direction.
  Cheers!</p>