How to set defaultValue with styles?

[aldwnesx]

Default values are not given the appropriate color

 <FormControl p={4}>
  <FormLabel>Select Tag</FormLabel>
  <Select
    size="lg"
    isMulti
    name="colors"
    options={mappedOptions}
    placeholder="Select some tags"
    closeMenuOnSelect={false}
    onChange={handleSetSelectedOptions}
    defaultValue={[mappedOptions[1]]}

  />
</FormControl>

[csandman]

Can you show me what the data looks like? Maybe a codesandbox reproduction

[csandman]

I tried making an example as close to the code as you provided as I could, and it appears to work fine:

https://codesandbox.io/s/chakra-react-select-demo-default-option-color-hrgm8?file=/example.js

In order to set a color on a tag, either include the colorScheme value in your option object:

const options = [{
  label: "Blue",
  value: "blue",
  colorScheme: "blue",
}]

or pass the colorScheme prop to the Select if you want all of the tags to be styled like that:

return (
  <Select colorScheme="purple" />
);