React sets the hierarchical style of ul li span

premise is that you don"t want to add className to each
the first question is how to style all li

li{
    color: yellow
}

I know one way is to use styled-components. Is there a better way?

const Li = styled.li`
    color: yellow
`;
<LI>test</Li>

the second question is how to style future generations when react sets styles

ul li span{
    color: red
}
<ul>
    <li>
        <span>test:test</span>
    </li>
</ul>

May.19,2022

it is recommended to use less
top-level box to set class container

.container{
    ul{
       li{
         span{
          }
       }
    }
}

to use a uniform style globally: global

I hope it can be helpful to you

Previous: Problems with PHP namespaces

Next: How to cancel the effect that the ring disappears when the mouse moves up? Baidu checked for a long time, but the configuration item could not be found.