reactjs - 你如何在 React 中设置嵌套的 css 样式？

Question

我的 css 文件中有嵌套的选择器。我是 React 的新手，并试图让它与我的 js 文件一起工作。有没有人有任何提示？

我找到了:https://blog.logrocket.com/the-best-styling-in-react-tutorial-youve-ever-seen-676f1284b945

它似乎有帮助，但没有提到如何处理嵌套的 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);
          }
        }
      }
    }
  }

Answer 1

它实际上不是“嵌套 CSS”。但它是一个 SASS/SCSS 代码。 SASS 和 SCSS 的目的相似，但有一些细微的差别。请在此处查看更多详细信息:https://www.geeksforgeeks.org/what-is-the-difference-between-scss-and-sass/ .就个人而言，考虑到 SCSS 不如 SASS 严格，我会建议 SCSS 而非 SASS。
如果您只想使用普通的 CSS，那么只需编写 CSS 脚本并将其导入您的 React。不会有问题的。您不应该遵循 SASS/SCSS 的“嵌套 CSS”方式(我实际上不建议这样做)。
假设您坚持使用 SASS/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>
  );
}

而 styles.scss只是同一目录下的普通SCSS代码，如下所示:

@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;
    }
  }
}

只要确保您有 node-sass在你的包裹里。否则你应该做 npm install node-sass --save .请在此处阅读官方文档: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet .
您可以在以下位置查看工作示例: https://codesandbox.io/s/x2z4ly6y2z