React-Sass中nth-child::after动态样式设置问题求助

我正在开发一个信息列表组件，接近完成时遇到了问题——无法在React中动态设置nth-child::after的样式。现在每个<ul>里只有一个<li>，导致nth-child选择器完全达不到预期效果，所有<li>的::after伪元素都用了第一个样式。我想要实现每个列表项的::after对应不同颜色，但实际效果和预期不符。

React组件代码 #

const PieList = ({ data, colors = [] }: IPieListProps) => {
  return data.length > 1 ? (
    data.map(( item, index ) => (
      <div
        key={item.name}
        className={styles['pie-list']}
        style={{ 
          backgroundColor: colors[index%colors.length] 
        }}
      >
          <ul>
            {
              item.name === 'others' 
              ? <li>Otros<span>{item.value}</span> </li> 
              : <li>{item.name}<span>{item.value}</span></li>
            }
          </ul>
      </div>
    )) 
  ) : ''
}

Sass样式代码 #

.pie-list {
  ul {
    max-width: 240px;
    li {
      &::after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 8px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      &:nth-child(1){
        &::after {
          background-color: $orion;
        }
      }
      &:nth-child(2){
        &::after {
          background-color: #433F5C;
        }
      }
      &:nth-child(3){
        &::after {
          background-color: #898798;
        }
      }
    }
  }
}

效果对比 #

• 预期效果：每个列表项前的圆点颜色各不相同，对应预设的颜色值
• 实际效果：所有列表项前的圆点都是第一个样式的颜色

解决方案 #

问题根源是每个<ul>只包含一个<li>，所以每个<li>都是其父级<ul>的第1个子元素，nth-child(2)、nth-child(3)永远不会匹配到任何元素。以下三种方法可以解决：

方法1：调整DOM结构，统一<li>到同一个<ul>下 #

修改React组件，将所有<li>放在同一个<ul>中，让nth-child能按顺序匹配列表项：

const PieList = ({ data, colors = [] }: IPieListProps) => {
  return data.length > 1 ? (
    <div className={styles['pie-list']}>
      <ul>
        {data.map((item, index) => (
          <li key={item.name}>
            {item.name === 'others' ? 'Otros' : item.name}
            <span>{item.value}</span>
          </li>
        ))}
      </ul>
    </div>
  ) : ''
}

原Sass样式无需修改，即可正常生效。

方法2：给父元素添加索引类，通过类选择器控制颜色 #

如果不想改DOM结构，给每个.pie-list添加带索引的类，再用父类控制伪元素颜色：

修改React组件

const PieList = ({ data, colors = [] }: IPieListProps) => {
  return data.length > 1 ? (
    data.map((item, index) => (
      <div
        key={item.name}
        className={`${styles['pie-list']} ${styles[`pie-list--${index + 1}`]}`}
      >
        <ul>
          <li>
            {item.name === 'others' ? 'Otros' : item.name}
            <span>{item.value}</span>
          </li>
        </ul>
      </div>
    ))
  ) : ''
}

修改Sass样式

.pie-list {
  ul {
    max-width: 240px;
    li {
      &::after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 8px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }

  &--1 ul li::after {
    background-color: $orion;
  }

  &--2 ul li::after {
    background-color: #433F5C;
  }

  &--3 ul li::after {
    background-color: #898798;
  }
}

方法3：用CSS变量动态传递颜色（最灵活） #

通过React给.pie-list设置CSS变量，伪元素直接引用该变量，无需预设固定样式：

修改React组件

const PieList = ({ data, colors = [] }: IPieListProps) => {
  return data.length > 1 ? (
    data.map((item, index) => {
      const color = colors[index % colors.length];
      return (
        <div
          key={item.name}
          className={styles['pie-list']}
          style={{ '--dot-color': color } as React.CSSProperties}
        >
          <ul>
            <li>
              {item.name === 'others' ? 'Otros' : item.name}
              <span>{item.value}</span>
            </li>
          </ul>
        </div>
      );
    })
  ) : ''
}

修改Sass样式

.pie-list {
  ul {
    max-width: 240px;
    li {
      &::after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 8px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: var(--dot-color);
      }
    }
  }
}

这种方式能完全适配colors数组中的任意颜色值，扩展性更强。

内容的提问来源于stack exchange，提问作者David Cisneros