我正在使用create-react-app并且正在尝试找出一种“有效”的方法来将样式表应用于特定页面。
我的src文件夹结构如下所示：
| pages
| - About
| - - index.js
| - - styles.css
| - Home
| - - index.js
| - - styles.css
| index.js
| index.css
在index.js我使用的每个文件中import './style.css'
但是，我发现当我从一个页面导航到下一个页面时，起始页面的样式被应用到目标页面，就好像它们被缓存一样，而目标页面的样式没有被遵循。
我只是想知道我是否误解了如何将 React 中的样式应用于特定页面。我应该制作包含样式的完全自包含的组件吗？
我正在考虑内联应用它们，但我意识到使用 JS 样式时存在限制。
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）
因为 React 主要用于创建单页应用程序 (SPA)，并且这种设计的目的是不要一遍又一遍地重新加载整个页面。所以样式表也不会被重新加载。
如果您将 React 与 Webpack 之类的捆绑器一起使用，那么所有样式表都会捆绑在一起。这同样适用于所有 React 组件。所以你得到了捆绑的 JS 和捆绑的 CSS。
为什么要分离样式表？
第一点没问题。第二点不是一个好的设计，因为您会创建令人困惑的样式表规则，并且它不会使用样式表的通用部分 - 级联。
我建议坚持使用捆绑方法，即使 CSS 文件变得比当前呈现的页面所需的要大一些。
在我看来，React 组件不应该依赖于任何样式表。只需实现一个组件，使其独立工作（子组件除外），然后在不同的应用程序中使用不同的样式表。
甚至，不要为您的组件使用内联样式表，因为这会炸毁您的实际 React 组件，尤其是当由于整个应用程序中可用的捆绑样式表而不会使用这些内联样式时。
要作为外部 css 样式表执行此操作，您需要重命名样式表。您的样式表需要以“.module.css”结尾，例如“styles.module.css”。此类文件中的 CSS 只能由导入它们的组件使用。正如 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 被认为更清洁。