react 设置 ul li span的层级样式

Question

前提是不想每个都加className
第一个问题是怎么给全部li设置样式

li{
    color: yellow
}

我知道一种方法是用styled-components,有没有更好的方法呢？

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

第二个问题是react设置样式时候怎么能给后代设置样式

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

Answer 1

建议使用less
顶级盒子设置class container

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

若要对全局使用统一样式 :global

希望能够对你有帮助