How to change react-select color

Question

I'm unsure how to change the color from the default blue to something else. The example code is in the codesandbox link below. I tried changing the styling for root, but had no success.

https://codesandbox.io/s/ly87zo23kl

Answer 1

Version 2.1.0 of react-select has added the option to override the theme.

Here an example of how it works:

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

You can find here the complete documentation and live example and here the different variables that can be overwritten.