Reactjs 如何在react中设置嵌套css的样式？

我的css文件中有嵌套的选择器。我是一个新的反应，并试图使它与我的js文件的工作。有人有什么建议吗

我发现：

这似乎很有帮助，但没有提到如何处理嵌套css。例如，我有&:before和&:after、@include signUpActive等。这真是一些令人困惑的东西

.img {
    overflow: hidden;
    z-index: 2;
    position: absolute;

    &:before {
      content: '';
      position: absolute;
      transition: transform 1.2s ease-in-out;
    }

    &:after {
      content: '';
      position: absolute;
    }

    @include signUpActive {
      &:before {
        transform: translate3d(640px,0,0);
      }
    }

    &__text {
      z-index: 2;
      position: absolute;
      transition: transform 1.2s ease-in-out;

      &.m--up {
          @include signUpActive {
          transform: translateX(260px*2);
        }
      }

      &.m--in {
        transform: translateX(260px * -2);
        @include signUpActive {
          transform: translateX(0);
        }
      }
    }

    &__btn {
      overflow: hidden;
      z-index: 2;
      position: relative;

      &:after {
        content: '';
        z-index: 2;
        position: absolute;
      }

        &.m--in {
          transform: translateY(36px*-2);
          @include signUpActive {
            transform: translateY(0);
          }
        }

        &.m--up {
          @include signUpActive {
            transform: translateY(36px*2);
          }
        }
      }
    }
  }

---

根据您的问题，我猜您正在尝试实现SCSS代码来响应组件。如果您使用的是“CRA”（创建react应用程序），则只需导入.scss文件以响应组件，如下所示：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.scss";

function App() {
  return (
    <div className="App">
      <div className="panel">
        <h2>Panel</h2>
        <div className="panel__inner">
          <h3>Inner panel</h3>
        </div>
      </div>
    </div>
  );
}

只需确保包中有

节点sass

。否则，您应该执行

npm安装节点sass--save

。请阅读以下官方文档：

---

您可以在以下位置查看工作示例：

您是否使用sass或类似工具？如果我想避免使用sass，是否有人知道其他方法？

@import "./scss-mixins/mixins.scss"; //Using relative path to the .scss file

.App {
  font-family: sans-serif;
  text-align: center;

  .panel {
    padding: 15px;
    background: #f9f9f9;

    &__inner {
      padding: 10px;
      background: green;
    }
  }
}