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

您可以使用样式组件库。

一个例子是

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

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

        &.inside{
            color:red;
        }
    }

`

但是我建议以更反应的方式进行


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

Answer 2

您可以尝试BEM（块元素修改器）

https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

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

2 个答案: