如何使 React CSS 导入组件范围？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47090574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make React CSS import component-scoped?
提问by Harry Cho
I have several components which have the following CSS/component structure
我有几个组件具有以下 CSS/组件结构
About/style.css
About/style.css
.AboutContainer {
# Some style
}
p > code {
# Some style
}
And I import the CSS in the componet as follows
我在组件中导入 CSS 如下
About/index.js
About/index.js
import './style.css';
export default class About extends Component {
render() {
# Return some component
}
}
However, the CSS is imported in the <header>section and stays global-scope.
但是，CSS 是在该<header>部分中导入的并保持全局范围。
I was expecting CSS to be:
我期待 CSS 是：
- Component-scoped in a way that the style is only applied to things that are onlyrendered within this component.
- Style for this component would disappear if the component is unmounted.
- 组件范围的方式，样式仅应用于仅在此组件中呈现的事物。
- 如果组件被卸载，此组件的样式将消失。
However, when inspecting from the browser, the styles are specified at the <header>section and gets applied to all the components
但是，从浏览器检查时，样式在该<header>部分指定并应用于所有组件
<header>
// Stuff
<style type="text/css">style for component About</style>
<style type="text/css">style for component B</style>
<style type="text/css">style for component C</style>
// Stuff
</header>
How do I import CSS to be component-scoped? It seems like I'm understanding CSS import in React ES6 incorrectly.
如何将 CSS 导入为组件范围？似乎我错误地理解了 React ES6 中的 CSS 导入。
I was following this tutorial
我正在关注本教程
Edit
编辑
Answer by Brett is correct. However, my problem turns out to be somewhere else. I created my app using create-react-appwhich basically simplifies setups required to do React. It include WebPack, Babel and other things to get started. The default WebPack config that it uses did not set module optionfor the css-loaderso it defaulted to false, and as a result the local-scoping was not enabled.
布雷特的回答是正确的。但是，事实证明我的问题出在其他地方。我使用create-react-app创建了我的应用程序，它基本上简化了执行 React 所需的设置。它包括 WebPack、Babel 和其他入门内容。它使用的默认 WebPack 配置没有为其设置模块选项，css-loader因此默认为false，因此未启用本地范围。
Just for additional info, it seems like create-react-app does not have straightforward way to customize WebPack config, but there seem to be numerous how-to workarounds on the web.
只是为了提供更多信息，似乎 create-react-app 没有直接的方法来自定义 WebPack 配置，但网络上似乎有许多操作方法。
回答by Brett DeWoody
It sounds like CSS Modules, or many of the other CSS-in-JS packages, does what you want. Others include Emotion(my current favorite), Styled Components, or many of the packages here.
听起来CSS Modules或许多其他 CSS-in-JS 包可以满足您的需求。其他包括Emotion（我目前最喜欢的）、Styled Components或这里的许多包。
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. All URLs (url(...)) and @imports are in module request format (./xxx and ../xxx means relative, xxx and xxx/yyy means in modules folder, i. e. in node_modules).
CSS 模块是一个 CSS 文件，其中默认情况下所有类名和动画名都在本地范围内。所有 URL (url(...)) 和 @imports 都是模块请求格式（./xxx 和 ../xxx 表示相对，xxx 和 xxx/yyy 表示在模块文件夹中，即在 node_modules 中）。
Here's a quick example:
这是一个快速示例：
Let's say we have a React component like:
假设我们有一个 React 组件，如：
import React from 'react';
import styles from './styles/button.css';
class Button extends React.Component {
render() {
return (
<button className={styles.button}>
Click Me
</button>
);
}
}
export default Button;
and some CSS in ./styles/button.cssof:
和一些CSS ./styles/button.css：
.button {
border-radius: 3px;
background-color: green;
color: white;
}
After CSS Modules performs it's magic the generated CSS will be something like:
在 CSS Modules 执行后，生成的 CSS 将类似于：
.button_3GjDE {
border-radius: 3px;
background-color: green;
color: white;
}
where the _3DjDEis a randomly generated hash - giving the CSS class a unique name.
其中_3DjDE是随机生成的散列 - 为 CSS 类提供唯一名称。
An Alternative
替代
A simpler alternative would be to avoid using generic selectors (like p, code, etc) and adopt a class-based naming convention for components and elements. Even a convention like BEMwould help in preventing the conflicts you're encountering.
一个简单的替代方法是避免使用通用选择器（如p，code等），并采用了组件和元件基于类的命名约定。即使像BEM这样的约定也有助于防止您遇到的冲突。
Applying this to your example, you might go with:
将此应用于您的示例，您可能会选择：
.aboutContainer {
# Some style
}
.aboutContainer__code {
# Some style
}
Essentially all elements you need to style would receive a unique classname.
基本上，您需要设置样式的所有元素都会收到一个唯一的类名。
回答by Liang
Maybe react-scoped-csswill help. Btw, I'm the author of this lib, if you find anything broken or simply want to improve it, you can always raise an issue or send a pr.
也许react-scoped-css会有所帮助。顺便说一句，我是这个库的作者，如果您发现任何问题或只是想改进它，您可以随时提出问题或发送公关。
回答by vinays84
You can use SASS (.scss) to imitate scoped CSS.
您可以使用 SASS (.scss) 来模仿作用域 CSS。
Say you need to use bootstrap in only one component (to avoid conflicts). Wrap the component in <div className='use-bootstrap'>and then created a .scss file like so:
假设您只需要在一个组件中使用引导程序（以避免冲突）。将组件包裹起来<div className='use-bootstrap'>，然后创建一个 .scss 文件，如下所示：
.use-bootstrap {
// Paste bootstrap.min.css here
}
