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

问题描述 投票:1回答:1

在一个带有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
}

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

reactjs sass react-router
1个回答
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,我也没有足够用。

热门问题
推荐问题
最新问题