how i can set selectedOptionColor as hexa #99
Answered
by
csandman
zaherkassem
asked this question in
Q&A
-
i am try to set hexa color ( #E8F3FE ) on selectedOptionColor but i got the following css: background: E8F3FE.500 what is wrong ? |
Beta Was this translation helpful? Give feedback.
Answered by
csandman
Mar 20, 2022
Replies: 1 comment 1 reply
-
So the name of the prop Here's an example of how you could accomplish that: https://codesandbox.io/s/chakra-react-select-selected-option-color-1k9ob3?file=/example.js import { Select } from "chakra-react-select";
const Example = () => (
<Select
name="colors"
options={groupedOptions}
placeholder="Select some colors..."
closeMenuOnSelect={false}
chakraStyles={{
option: (provided, { isSelected }) => ({
...provided,
...(isSelected && {
backgroundColor: "#E8F3FE",
color: "black"
})
})
}}
/>
); |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
csandman
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
So the name of the prop
selectedOptionColor
is kind of a misnomer. It should really beselectedOptionColorScheme
because it applies a color from your theme depending on whether your app is in light or dark mode. If you want to set the color to a specific hex color, you should use thechakraStyles
prop to customize it.Here's an example of how you could accomplish that: https://codesandbox.io/s/chakra-react-select-selected-option-color-1k9ob3?file=/example.js