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.
Add a comment
|
3 Answers
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.
2 Comments
Student
In react v3, style components have confusing names: neutral0 sets background, primary25 sets highlight and neutral80 sets selected text color. Non-selected text color can be set by setting color: '#ffffff' on the parent element.
Mariana Marica
I would add that the overridden colors must have known browser names like the ones in the example, and hex colors would not work (at least in my case, hex didn't work :( )
Tested on react-select v5.7.4
For changing the dropdown's background color:
<Select
styles={{
control: (provided, state) => ({
...provided,
boxShadow: "none",
border: "none",
backgroundColor: "red",
color: "#000000",
width:"100%"
})
}}
/>
For Changing the dropdown option's background color as well:
<Select
styles={{
control: (provided, state) => ({
...provided,
boxShadow: "none",
border: "none",
backgroundColor: "red",
color: "#000000",
width:"100%"
}),
option: (provided, state) => ({
...provided,
backgroundColor: state.isSelected ? '#00AEEC' : 'inherit',
})
}}
/>
Comments
I'd find a good and complete answer, so I started to looked inside the code of React-select and i find this:
<Select
options={options}
menuPortalTarget={document.body}
menuPosition="fixed"
theme={(theme) => ({
...theme,
borderRadius: 10,
colors: {
...theme.colors,
//after select dropdown option
primary50: "gray",
//Border and Background dropdown color
primary: "#CAFFFA",
//Background hover dropdown color
primary25: "gray",
//Background color
neutral0: "black",
//Border before select
neutral20: "#CAFFCA",
//Hover border
neutral30: "#82FFE7",
//No options color
neutral40: "#CAFFCA",
//Select color
neutral50: "#F4FFFD",
//arrow icon when click select
neutral60: "#42FFDD",
//Text color
neutral80: "#F4FFFD",
},
})}
i know this answer is old but i hope help anyone.
