reactjsreact-select

How to change react-select color


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


Solution

  • 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.