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

Question

我有一个使用 ChakraUI 的选择下拉菜单，如下所示：

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

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

Answer 1

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

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

请注意，如果添加占位符<Select>，打开时它仍然是白底白字。

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