我有几个组件,它们具有以下CSS/组件结构
About/style.css
.AboutContainer {
# Some style
}
p > code {
# Some style
}
在组件中,我如下导入CSS:
About/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
设置模块选项,所以它默认为false
,因此未启用局部作用域。
只是为了提供额外的信息,看起来create-react-app没有直接自定义Webpack配置的简单方法,但似乎有许多针对web的如何解决的方法。
create-react-app
创建的React应用中使用CSS模块。 - kodebot