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

根据您的问题，我想您正在尝试实现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

您如何在响应中设置嵌套CSS的样式？

1 个答案: