how i can set selectedOptionColor as hexa

[zaherkassem]

i am try to set hexa color ( #E8F3FE ) on selectedOptionColor but i got the following css:

background: E8F3FE.500

what is wrong ?

[csandman]

So the name of the prop selectedOptionColor is kind of a misnomer. It should really be selectedOptionColorScheme 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 the chakraStyles 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

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"
        })
      })
    }}
  />
);

[csandman]

This prop has actually been renamed to selectedOptionColorScheme, so you should use that going forward.