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

我正在使用create-react-app，我正在尝试制定将样式表应用于特定页面的“高效”方式。React CSS - 如何仅将CSS应用于特定页面

我src文件夹结构看起来是这样的：

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

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

然而，我发现，当我从一个页面浏览到下来自起始页面的样式正在被应用到目标页面，就好像它们被缓存并且目标页面的样式没有被遵循一样。

我只是想知道如果我误解了如何将样式应用于React到特定页面。我是否应该制作完全自包含的组件，它们也会增加风格？

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

2017-05-09 tommyd456

创建反应应用程序将所有的CSS文件捆绑成一个，所有样式将在您的应用程序中的每个地方（每个渲染组件）都可用。请注意，CRA是一个单页面应用程序（SPA），因此您无法在“页面”中进行思考，而是在DOM中的“渲染组件”中进行思考。

你有多个解决方案：

1是在你的CSS文件组织：由你的组件名称，以避免冲突（如BEM）前缀所有的类或使用CSS层次结构.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-弹出或使用反应的脚本的一个叉（CRA的发动机）使用CSSModules（https://github.com/css-modules/css-modules）

2017-05-09 14:38:34 gouroujo

由于阵营主要是用来创建Single Page Applications (SPA)和由该设计意图是不重新加载整个页面一遍又一遍。所以样式表也不会被重新加载。

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

为什么你可能想分开样式表？

第一点是好的。第二点不是一个好的设计，因为你会创建令人困惑的样式表规则，它不会使用样式表的一般部分 - 级联。

即使CSS文件变得比当前渲染页面所需要的大一点，我仍建议坚持捆绑方式。

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

即使不要为组件使用内联样式表，因为这会炸掉实际的React组件，特别是当由于整个应用程序中可用的捆绑样式表而不使用这些内联样式时。

2017-05-09 14:47:09 Marc

回答