样式化的组件是否嵌套样式？

Question

当使用样式化组件时，对于更大的可扩展应用程序来说，什么是更好的方法？为每个 html 标签制作单独的变量，或者只是将 css 嵌套在变量中？

例如：我有以下简单的结构：

ul {
  li {
    a {

    }
  }
}

const list = styled.ul`
   padding: 0;
   li {
    padding: 10px 0;
      a {
        color: black;
      }
   }
`

或

 const list = styled.ul`
       padding: 0;
    `

const listLi = styled.li`
       padding: 10px;
    `

const listA = styled.a`
       color: #333;
    `

Answer 1

尽可能少地分开并多次组合。 它将使您轻松地在项目中重用组件。