Unable to change react-select selected value color when menu is clicked

Question

I am using react-select to select and search from a list. I need to change the text color of the selected text (that is visible in the search box) to gray when the user clicks on the search box and intends to search for a new option while letting it remain black when the user clicks out of the search box/has selected a new option.

I can change the color of the text by modifying the style for singleValue in the styles prop. But cannot change the color when the search menu is selected. Tried some other options too but the text color does not change when the search menu is in the selected state.

<Select
  components={{
    DropdownIndicator: () => null,
    IndicatorSeparator: () => null,
  }}
  placeholder="Search Names"
  onChange={selectName}
  options={namesList}
  styles={{
    singleValue: (styles, state) => {
      return {
        ...styles,
        color: state.isSelected ? "gray" : "black",
      };
    },
  }}
/>;

Any suggestions what I am doing wrong here?

Answer 1

You need to use theme prop.

    <Select
    defaultValue={flavourOptions[0]}
    label="Single select"
    options={flavourOptions}
    theme={(theme) => ({
      ...theme,
      borderRadius: 0,
      colors: {
      ...theme.colors,
        text: 'orangered',
        primary25: 'hotpink',
        primary: 'black',
      },
    })}
  />

Credit: Original Answer Here