有谁知道如何解决这个问题？（动态第 n 个孩子和之后）react-sass

Question

我正在尝试弄清楚，但我一直无法...这是一个包含信息的列表，它实际上已经准备就绪，但是第 nth-child:after 样式我无法通过 React 使其动态化。

我的 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>
    )) 
  ) : ''
}`

.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;
        }
      }
    }
  }
}

我试图得到这个结果：

但我有这个：

Answer 1

你应该试试这个：

ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

Answer 2

我用一个名为“styled-components”的 package 解决了它，但是如果有人有更好的解决方案而不涉及一个库那就太好了。

const Bullet = styled.div`
  max-width: 240px;
    li{
      position: relative;
      margin-bottom: 10px;
      padding-left: 14px;
      font-size: 14px;
      color: $orion;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &::after {
        content: '';
        width: 8px;
        height: 8px;
        background-color: ${ props => props.bulletColor };
        border-radius: 8px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
`

export const PieBanksList = ({ data, colors }: IPieBanksListProps) => {

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