title: react-select noOptionsMessageCSS not working
body: <p>I am trying to do some styling for react-select. I've made <a href="https://codesandbox.io/s/xjyornmy34" rel="nofollow noreferrer">this</a> so far. Things that I need is to change the color for the "No option message". But, as we can see in the sandbox, the color is not change with <code>noOptionsMessageCSS</code>. Then, how to change it?</p>
  
  <p>Here is the code incase the link is broken:</p>
  
  <pre><code>import React from "react";
  import Select from "react-select";
  
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "cream", label: "Cream" },
    { value: "blueberry", label: "Blueberry" },
    { value: "bubblegum", label: "Bubble Gum" },
    { value: "cherry", label: "Cherry" },
    { value: "cheese", label: "Cheese" },
    { value: "mocca", label: "Mocca" },
    { value: "cappucino", label: "Cappucino" },
    { value: "mint", label: "Mint" }
  ];
  
  class App extends React.Component {
    state = {
      selectedOption: options[0]
    };
    handleChange = selectedOption =&gt; {
      this.setState({ selectedOption });
      console.log(`Option selected:`, selectedOption);
    };
    render() {
      const { selectedOption } = this.state;
  
      const style = {
        // option: (base, state) =&gt; ({
        //   ...base,
        //   borderBottom: '1px dotted pink',
        //   color: state.isSelected ? 'red' : 'blue',
        //   padding: 20,
        // }),
        option: (base, state) =&gt; ({
          ...base,
          backgroundColor: state.isSelected ? "grey" : "grey",
          color: state.isSelected ? "white" : "black",
          ":active": {
            backgroundColor: state.isSelected ? "grey" : "grey",
            color: state.isSelected ? "white" : "white"
          }
        }),
        control: (base, state) =&gt; ({
          ...base,
          background: "white",
          borderRadius: 0,
          borderTop: 0,
          borderLeft: 0,
          borderRight: 0,
          // This line disable the blue border
          borderColor: state.isFocused ? "black" : "black",
          // boxShadowColor: 'red',
          boxShadow: state.isFocused ? 0 : 0
        }),
        menu: base =&gt; ({
          ...base,
          // override border radius to match the box
          borderRadius: 0,
          // beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
          hyphens: "auto",
          // kill the gap
          marginTop: 0,
          textAlign: "left"
          // prevent menu to scroll y
          // wordWrap: "break-word"
        }),
        menuList: (base, state) =&gt; ({
          ...base,
          // kill the white space on first and last option
          padding: 0,
          backgroundColor: "grey",
          maxHeight: "80px",
          overflowY: "auto"
        }),
        indicatorSeparator: (base, state) =&gt; ({
          ...base,
          display: "none"
        }),
        dropdownIndicator: (base, state) =&gt; ({
          ...base,
          transition: "all .2s ease",
          transform: state.isFocused ? "rotate(180deg)" : null
        }),
        noOptionsMessageCSS: (base, state) =&gt; ({
          ...base,
          color: "white",
          backgroundColor: "blue"
        })
        // container: (base, state) =&gt; ({
        //   ...base,
        //   backgroundColor: "blue",
        //   color: "red"
        // })
      };
  
      return (
        &lt;div style={{ width: "50%", margin: 20 }}&gt;
          &lt;Select
            value={selectedOption}
            onChange={this.handleChange}
            options={options}
            isClearable={true}
            styles={style}
            placeholder="Please Input"
            noOptionsMessage={() =&gt; "Zero Result"}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Thank you!</p>