如何在chakra-react-select组件中覆盖选项文本颜色

问题背景 #

我使用chakra-react-select包的Select组件，同时在全局主题中设置了页面深色背景与白色文本：

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

这一全局设置导致Select组件的下拉选项文本也继承了白色，与下拉菜单的浅色背景冲突，难以阅读。我的Select组件代码如下：

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;

需要保留全局主题设置的同时，将下拉选项的文本改为黑色，确保内容清晰可见。

解决方案 #

方法1：通过组件内置属性单独设置样式 #

利用chakra-react-select提供的menuListProps和optionProps，直接为下拉菜单和选项指定样式，覆盖全局继承的颜色：

<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" },
  ]}
  // 添加自定义样式属性
  menuListProps={{
    bg: "white", // 设置下拉菜单背景为白色，增强文本对比度
  }}
  optionProps={{
    color: "black", // 强制选项文本为黑色
  }}
/>

方法2：在全局主题中针对组件样式覆盖 #

通过扩展Chakra主题时，专门为chakra-react-select内部的Option和MenuList组件设置基础样式，一次性解决所有同类型组件的问题：

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

方法3：自定义CSS类名覆盖 #

为Select组件添加自定义类名，然后通过CSS选择器精准修改选项样式：

// 组件中添加className属性
<Select
  // 其他原有属性
  className="dark-theme-select"
/>

对应的CSS代码：

.dark-theme-select .chakra-react-select__option {
  color: black !important;
}
.dark-theme-select .chakra-react-select__menu-list {
  background-color: white;
}

内容的提问来源于stack exchange，提问作者Birre