html - 在 React 中设置嵌套元素样式的最佳方式是什么？

Question

我正在尝试使用 CSS 设置多个 div 元素的样式。在普通 CSS 中，可以使用以下代码:

.wrapper{
  width: 300px;
  height: 500px;
  .container {
    width: 50%;
    height: 20%;
    .inside {
      color: red;
    }
  }
}

然而，为了在 CSS 模块中使用相同的 CSS，需要按如下方式编写:

.wrapper{
      width: 300px;
      height: 500px;
}

.wrapper .container {
        width: 50%;
        height: 20%;
}

.wrapper .container .inside {
          color: red;
        }

有没有更好更简单的方法来做到这一点？因为当有很多元素时，这种方法似乎更复杂!

Answer 1

您可以使用 styled-components 库。

一个例子是

const Wrapper = styled.div`
    width: 300px;
    height: 500px;

    &.container{
        width: 50%;
        height: 20%;

        &.inside{
            color:red;
        }
    }

`

但是我会建议以更 react 的方式来做

const Wrapper = styled.div`
    width: 300px;
    height: 500px;
`
const Container = styled.div`
    width: 50%;
    height: 20%;
`
const Inside = styled.div`
    color: red;
`