Override option text color in a select component

[FilipBPaven]

I'm trying to get black option text without using darkmode...

This is my component:

import { Flex, FormControl, FormLabel } from "@chakra-ui/react";
import {
    Select
} from "chakra-react-select";
import * as React from "react";

const SelectChoc = ({}) => {
  const colorOptions = [
    { value: "blue", label: "Blue", color: "#0052CC" },
    { value: "purple", label: "Purple", color: "#5243AA" },
    { value: "red", label: "Red", color: "#FF5630" },
    { value: "orange", label: "Orange", color: "#FF8B00" },
    { value: "yellow", label: "Yellow", color: "#FFC400" },
    { value: "green", label: "Green", color: "#36B37E" },
  ];
  return (
    <Flex justify="center" align="center" w="full">
      <FormControl p={4}>
        <FormLabel>With variant="filled"</FormLabel>
        <Select
          colorScheme="blackAlpha"
          focusBorderColor="blue.500"
          selectedOptionColorScheme="blue"
          isMulti
          name="colors"
          options={colorOptions}
          placeholder="Select some colors..."
          variant="filled"
          defaultValue={[
            { value: "blue", label: "Blue", color: "#0052CC" },
            { value: "purple", label: "Purple", color: "#5243AA" },
          ]}
        />
      </FormControl>
    </Flex>
  );
};

export default SelectChoc;
However in my main page where i use the component i have this theme. And due to the color: "white", it makes the option text white as well.

const theme = extendTheme({
 styles: {
   global: {
     body: {
       bg: "#0e0f11",
       color: "white",
     },
   },
 },
});

Look at these picture:

1. Before clicking the selector enter
   

When showing options available enter

I still want to keep the theme on my page, but somehow make the text for the dropdown options black. Have tried everything. Would love some advice... :)

Cheers!

[csandman]

The easiest way to implement this is using the chakraStyles prop. This is very simple to accomplish by setting color on the root container component, as all of the nested components are just inheriting their colors:

<Select
  chakraStyles={{
    container: (provided) => ({
      ...provided,
      color: "black",
    }),
  }}
/>

This will also ensure that the controls (clear button and dropdown arrow) also inherit this color:

Now, if you're happy with the main control component becoming black when you focus it, this is all you need (you didn't mention anything about this). But it does make things very hard to see, so if you'd like to keep that light colored when you focus as well, add this to your chakraStyles prop:

<Select
  chakraStyles={{
    container: (provided) => ({
      ...provided,
      color: "black",
    }),
    control: (provided) => ({
      ...provided,
      _focusVisible: {
        bg: "white",
      },
    }),
  }}
/>

This will ensure that everything is equally visible when your component is focused:

Here's a complete CodeSandbox example: https://codesandbox.io/p/sandbox/w9jf8j?file=%2Fcomponents%2Fselect-choc.tsx

And next time you have a question, it would be great if you could provide a CodeSandbox with a complete example with your question. It's much easier to provide help if I have a complete example of what you've tried to go off of.