如何使用React.js更改列表的项目符号颜色？

Question

我想显示UsersList的随机项目符号颜色。我该怎么做？下面是我的代码：

const UsersList = props => (
  <div className={styles.Users}>
    <div className={styles.UsersOnline}>
      {props.users.length} people online
    </div>
    <ul className={styles.UsersList}>
      {
        props.users.map((user) => {
          return (
            <li key={user.id} className={styles.UserItem}>
              {user.name}
            </li>
          );
        })
      }
    </ul>
  </div>
);

Answer 1

我认为您只在寻找CSS，如下所示：

ul {
   list-style: none;
}

ul li::before {
   content: "\2022";
   color: "red";
}

默认情况下，无法更改列表项的项目符号颜色。因此，您首先必须隐藏项目符号，然后为项目符号（unicode）添加 content：“ \ 2022”; 并更改颜色。