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

我正在尝试使用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;
        }

---

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

您可以使用样式化组件库

例如

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;
`

---

您可以使用样式化组件库

例如

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;
`

---

可能重复我以前尝试过的解决方案，但它在CSS文件中不起作用。你研究过SASS吗？这对嵌套CSS很好：试试样式化组件，它支持嵌套CSS。可能是我以前尝试过的解决方案的重复，但在CSS文件中不起作用。你研究过SASS吗？它非常适合嵌套CSS：试试样式化组件，它支持嵌套CSS。