0
223
ViewsChange Background Color base React-select when its isDisabled
this is from react-select documentation
in this case, I will change color base of the select-field when
isDisabled={true}
to another color.
> import React from "react";
> import Select from "react-select";
>
> const colourOptions = [
> { value: "red", label: "Red" },
> { value: "green", label: "Green" },
> { value: "blue", label: "Blue" }
> ];
>
> const colourStyles = {
> option: (styles, { data, isDisabled, isFocused, isSelected }) => {
> // const color = chroma(data.color);
> console.log({ data, isDisabled, isFocused, isSelected });
> return {
> ...styles,
> backgroundColor: isFocused ? "#999999" : null,
> color: "#333333"
> };
> }
> };
>
> export default () => (
> <Select
> defaultValue={colourOptions[1]}
> label="Single select"
> options={colourOptions}
> styles={colourStyles}
> isDisabled={true}
> />
> );
my expectation, base color of the select-field can be changed to another color.
·
Juan Pablo Isaza
1 answers
Answer question0
SOLVED
<Select
defaultValue={flavourOptions[2]}
options={flavourOptions}
theme={(theme) => ({
...theme,
borderRadius: 0,
colors: {
...theme.colors,
primary25: 'hotpink',
primary: 'black',
},
})}
/>
primary25 is condition when isDisable = true. You can find this in react-select documentation (Overriding the theme)
·
Juan Pablo Isaza
Report
Answer question