Does anyone know how to fix this ?( Dynamic nth-child & after ) react-sass - reactjs

Question

I'm trying to figure it out, but I haven't been able to...
It's a list with information and it's really almost ready, but the nth-child:after style I can't make it dynamic with react.
My React component:
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;
}
}
}
}
}
I am trying to get this result:
But I have this:

Answer 1

you should try this:
ul {
list-style: none;
}
ul li::before {
content: "\2022";
color: red;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}

Answer 2

I solved it with a package called "styled-components", but if someone has a better solution that doesn't involve a library that would be great.
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 />
}