next.js Chakra UI：在Select中更改选项文本颜色和选项背景

ctzwtxfj 于 2023-10-18 发布在其他

关注(0)|答案(2)|浏览(144)

我有一个使用ChakraUI的精选插件，它像：

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

当我单击以显示时，该选项的textColor和bgColor都为白色。我想改变选项出现textColor是黑色和bgColor是白色。我已经设置颜色，bgColor在选项字段，但它不工作

next.js

来源：https://stackoverflow.com/questions/70553323/chakra-ui-change-option-text-color-and-option-background-in-select

2条答案

按热度按时间

50pmv0ei1#

您需要设置<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中，那里的菜单看起来就像一个标准的操作系统菜单。

赞(0）回复(0）举报 2023-10-18

xyhw6mcr2#

适用于那些在Windows的Chrome上使用chakra-ui选择时遇到麻烦的人。这是我想到的最简单的解决方案。

<Select
  ...
  bg='black'
  color: 'white'
  sx={{
    '> option': {
      background: 'black',
      color: 'white',
    },
  }}
>

注意：选择的选项只能编辑背景和颜色。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#styling_with_css

赞(0）回复(0）举报 2023-10-18

我来回答

next.js Chakra UI：在Select中更改选项文本颜色和选项背景

2条答案

相关问题

热门标签

最新问答