React CSS - 如何仅将 CSS 应用于特定页面答案

【问题标题】：React CSS - how to apply CSS to specific pages onlyReact CSS - 如何仅将 CSS 应用于特定页面
【发布时间】：2017-05-09 14:16:46
【问题描述】：

我正在使用create-react-app，并且正在尝试找出一种“有效”的方式将样式表应用于特定页面。

我的src 文件夹结构如下所示：

| pages
| - About
| - - index.js
| - - styles.css
| - Home
| - - index.js
| - - styles.css
| index.js
| index.css

在我使用import './style.css'的每个index.js文件中

但是，我发现当我从一个页面导航到下一个页面时，起始页面中的样式被应用于目标页面，就好像它们被缓存并且目标页面中的样式没有被遵循一样.

我只是想知道我是否误解了如何将 React 中的样式应用于特定页面。我是否应该制作包含样式的完全独立的组件？

我正在考虑内联应用它们，但我意识到使用 JS 样式时存在限制。

【问题讨论】：

标签： reactjs create-react-app

【解决方案1】：

Create react app 会将你所有的 css 文件打包成一个文件，这样所有的样式在你的应用程序中随处可用（在每个渲染的组件上）。请注意，CRA 是单页应用程序 (SPA)，因此您不能在“页面”中思考，而是在 DOM 中的“渲染组件”中思考。

您有多种解决方案：

1- 在您的 css 文件中进行组织：在您的所有类前面加上组件名称以避免冲突（如 BEM）或使用 css hierachy .my-component > .my-class {...}

<div className="my-component">
   <span className="my-class">Hello</span>
</div>

2- 在 JSX 文件中声明所有样式：

const styles= {
  myComponent: {
    fontSize: 200,
  },
};
const myComponent = () => (
  <span style={styles.myComponent}>Hello</span>
);

缺点是默认情况下您的样式不会以供应商为前缀。

3- 弹出或使用 react-scripts 的分支（CRA 的引擎）来使用 CSSModules (https://github.com/css-modules/css-modules)

【讨论】：

【解决方案2】：

因为 React 主要用于创建 Single Page Applications (SPA)，而这种设计的目的是不一遍又一遍地重新加载整个页面。所以样式表也不会被重新加载。

如果您将 React 与 Webpack 之类的捆绑器一起使用，那么所有样式表都会捆绑在一起。这同样适用于所有 React 组件。所以你会得到捆绑的 JS 和捆绑的 CSS。

您为什么要分离样式表？

捆绑的 CSS 文件变小了。
您可以有重复的样式表名称，但属性设置不同。

第一点没问题。第二点不是一个好的设计，因为您会创建令人困惑的样式表规则，并且它不会利用样式表的一般部分 - 级联。

我建议坚持使用捆绑的方法，即使 CSS 文件变得比当前呈现的页面所需的大一点。

在我的选择中，React 组件不应该依赖于任何样式表。只需实现一个组件，使其独立工作（子组件除外），然后在具有不同样式表的不同应用程序中使用它们。

甚至，不要为您的组件使用内联样式表，因为这会炸毁您的实际 React 组件，尤其是当由于整个应用程序中可用的捆绑样式表而无法使用这些内联样式时。

【讨论】：

【解决方案3】：

要将其作为外部 CSS 样式表，您需要重命名您的样式表。您的样式表需要以“.module.css”结尾，例如“styles.module.css”。此类文件中的 CSS 只能由导入它们的组件使用。 As stated in a tutorial from W3Schools.

假设这是您在 styles.module.css 中的 CSS 代码：

.container {
  color: white;
}
.cont-child {
  background-color: red;
}

然后在你的 JS 文件中，如果 JS 和 CSS 文件在同一个目录中，你可以像这样导入 CSS 文件。确保您指向正确的路径。

import styles from './styles.module.css'

然后在您的 HTML 部分中，您可以像这样使用它：

class Home extends React.Component {
  render() {
    return(
      <main className={ styles.container } >
        <div className={ styles["cont-child"]} >
          Some div text about something...
        </div>
      </main>
    );
  }
}

我目前使用这两种方法来访问选择器，因为样式变量就像一个对象。我将它们都放在这里是因为第二个选项能够获取名为“btn-active”的选择器。这在某些情况下会派上用场。 Camelcasing is considered cleaner though.

【讨论】：