Chakra UI：更改 Select 中的选项文本颜色和选项背景

Question

我有一个使用 ChakraUI 的 select 下拉菜单，它像：

<Select color={"white"} bg={"black"}>
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
</Select>

当我点击下拉菜单时，该选项的 textColor 和 bgColor 均为白色。我想更改显示 textColor 为黑色且 bgColor 为白色的选项。我在选项字段中设置了颜色 bgColor 但它不起作用

Answer 1

您需要设置 <option> 的样式：

<Select bg="black" color="white">
  <option style={{ color: 'black' }} value="option1">
    Option1
  </option>
  <option style={{ color: 'black' }} value="option2">
    Option2
  </option>
</Select>;

请注意，如果您在 <Select> 中添加占位符，打开时它仍然是白色的。

另一个奇怪的是，这个问题不会发生在 Safari 中，那里的下拉菜单看起来就像一个标准的 OS 菜单。

Chakra UI：更改 Select 中的选项文本颜色和选项背景

Chakra UI: Change option text color and option background in Select

reactjs

next.js

chakra-ui