如何修改Chakra UI中<ListItem>组件的项目符号（标记）颜色

嘿，这个问题我之前也碰到过！Chakra UI的列表组件默认会继承主题的文本颜色作为标记色，但其实它提供了非常直接的方式来单独修改标记的颜色，完全不会影响列表项的文本内容，下面给你两种实用的方法：

方法一：在组件上统一设置所有标记颜色 #

如果你想让整个列表的项目符号都变成同一个自定义颜色（比如你说的红色），可以直接在<List>组件上使用Chakra的_marker伪类样式属性，这是官方专门为列表标记提供的样式入口：

import { List, ListItem } from "@chakra-ui/react";

function MyList() {
  return (
    <List gap={3} _marker={{ color: "red" }}>
      <ListItem>First item</ListItem>
      <ListItem>Second item</ListItem>
      <ListItem>Third item</ListItem>
    </List>
  );
}

这样设置后，所有<ListItem>的项目符号都会变成红色，而文本颜色依然保持默认的主题色，完美分离了标记和文本的样式。

方法二：为单个设置自定义标记颜色 #

如果你需要给某个特定的列表项设置不同的标记颜色，直接在对应的<ListItem>上添加_marker属性即可：

<List gap={3}>
  <ListItem>First item（默认颜色标记）</ListItem>
  <ListItem _marker={{ color: "blue" }}>Second item（蓝色标记）</ListItem>
  <ListItem>Third item（默认颜色标记）</ListItem>
</List>

这种方式非常灵活，能轻松实现列表标记的差异化样式。

小提示 #

不要用全局CSS去修改列表标记的颜色哦，那样很容易影响到其他不需要修改的列表。用Chakra内置的_marker伪类样式，既能精准控制目标组件，又能保持代码和Chakra样式系统的一致性，是最推荐的做法。

内容来源于stack exchange