关于/ style.css文件
.AboutContainer {
# Some style
}
p > code {
# Some style
}
我按如下方式在组件中导入CSS
关于/ index.js
import './style.css';
export default class About extends Component {
render() {
# Return some component
}
}
但是,CSS会在< header>中导入.部分并保持全球范围.
我期待CSS是：
>组件作用域的方式是样式仅应用于仅在此组件中呈现的事物.
>如果卸载组件,此组件的样式将消失.
但是,从浏览器检查时,样式在< 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>
如何将CSS导入为组件范围？好像我正在理解React ES6中的CSS导入错误.
编辑
Brett的回答是正确的.但是,我的问题原来是在其他地方.我使用create-react-app创建了我的应用程序,它基本上简化了做React所需的设置.它包括WebPack,Babel和其他要开始的事情.它使用的默认WebPack配置没有为css-loader设置module option,因此默认为false,因此未启用本地范围.
仅仅是为了获得更多信息,似乎create-react-app没有直接的方式来自定义WebPack配置,但似乎有很多如何在Web上进行解决方法.
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).
这是一个简单的例子：
假设我们有一个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;
以及./styles/button.css中的一些CSS：
.button {
border-radius: 3px;
background-color: green;
color: white;
}
在CSS模块执行它之后,生成的CSS将是：
.button_3GjDE {
border-radius: 3px;
background-color: green;
color: white;
}
其中_3DjDE是随机生成的哈希 – 为CSS类提供唯一的名称.
替代
更简单的替代方法是避免使用泛型选择器(如p,代码等)并对组件和元素采用基于类的命名约定.即使像BEM这样的公约也有助于防止你遇到的冲突.
将此应用于您的示例,您可能会使用：
.aboutContainer {
# Some style
}
.aboutContainer__code {
# Some style
}
基本上,您需要设置样式的所有元素都将获得唯一的类名.
