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>