反应路线如何导入本地scss文件仅适用于一个js文件？

Question

在一个带有React Router的React应用中，对于每个路由组件，我希望只有一个本地scss文件适用于此文件。

对于下面的示例，about.js导入了about.scss，我想拥有的是：about.scss仅在about.js中覆盖app.scss中的全局样式。但是，它覆盖了应用程序中的所有内容

app.js-导入的app.scss，我希望将其用作全局样式

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import "./app.scss";  // global scss
import About from "./about";

export default function App() {
  return (
    <>
      <h1>question about scss in react route</h1>
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
          <hr />
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    </>
  );
}
function Home() {
  return (
    <div>
      <h3 className={"myMargin"}>home</h3>
    </div>
  );
}

app.scss（全局样式）

h3.myMargin {
  margin: 10px
}

about.js

import React from "react";
import "./about.scss";

export default function About() {
  return (
    <div>
      <h3 className={"myMargin"}>About</h3>
    </div>
  );
}

about.scss（我想成为本地样式，但是它适用于应用程序中的所有地方）

h3.myMargin {
  margin: 100px
}

任何建议如何构造我的样式代码？

Answer 1

CSS的优点（和警告）在其首字母缩写词的第一个C中，它代表cascading，这意味着要遵循一系列（相当可预测的）规则。

在这种情况下，about.scss稍后被导入，无论如何都将从应用程序覆盖h3。

1）使用容器：

import React from "react";
import "./about.scss";

export default function About() {
  return (
    <div className='about-page'>
      <h3 className="myMargin">About</h3> // note: no need for {"myMargin"}
    </div>
  );
}

// about.scss
.about-page {
  h3.myMargin {
    margin: 10px
  }
}

2）使用CSS模块：

另一种方法是使用CSS模块，如果您使用的是create-react-app的较新版本，则默认启用该功能：

import React from "react";
import styles from "./About.module.scss";

export default function About() {
  return (
    <div>
      <h3 className={styles.myMargin}>About</h3>
    </div>
  );
}

// About.module.scss
.myMargin {
  margin: 10px
}

这将生成唯一的className，因此您处理的代码将如下所示：

<div>
  <h3 class='About_myMargin_mVxOd>About</h3>
</div>

随机散列（例如，mVxOd）将使您的样式不会相互覆盖。

两种方法都有优缺点，使用常规CSS / SCSS导入时最大的问题是您受CSS规则的支配：如果不小心创建了全局类.error，则规则将级联为任何组件及其难以跟踪。例如，导入Bootstrap将会覆盖许多您不知道的CSS名称（直到您意识到CSS已关闭）。

[另一个问题是，如果所述路由未导入CSS文件，但是稍后遵循其他路由路径确实会导入文件，则您可能会得到不同的样式。这已经发生了几次，因此必须格外小心，尤其是在较大的团队中。

CSS模块有一些大的缺点，第一个缺点是您不能仅通过覆盖CSS类来直接从另一个CSS文件中覆盖样式（由于所述哈希）。其次，您无法访问SASS允许的嵌套CSS选择器。

我个人既用于生产项目，也用于个人项目，当仔细使用时，两者都同样出色。

[还有第三个流行的选项，称为样式化组件。从个人角度来看，它不是我的首选，并且我没有使用太多，但是您可以在它的official page上了解更多。看起来像这样：

const Title = styled.h3`
  margin: 10px;
`

render() {
  return <Title>About</Title> // creates an h3 tag
}

最后一个，是JS中的CSS，我也没有足够用。