react中css作用域问题探究
场景1
新建组件Page1与Page2，两个组件的根节点className设置为一样
目录结构如下：
src/pages/page1/index.js
import React from 'react'
import './index.css'
function Page1() {
return (
<div className='title'>page1</div>
)
}
export default Page1
src/pages/page1/index.css
.title {
background-color: #ccc;
}
src/pages/page2/index.js
import React from 'react'
import './index.css'
function Page2() {
return (
<div className='title'>page2</div>
)
}
export default Page2
src/pages/page2/index.css
.title {
background-color: red;
}
src/app.js
import Page1 from './pages/page1';
import Page2 from './pages/page2';
function App() {
return (
<div className="App">
<header className="App-header">
<Page1 />
<Page2 />
</header>
</div>
);
}
export default App;
效果图如下：
会发现两个组件之间样式会相互影响？是因为最终打包出来的样式渲染到节点上是这样的：
结论：CSS文件分离 ！== CSS作用域隔离
CSS的一些常见问题
- 全局污染
- 命名混乱
- 代码关系复杂
- 无法共享变量
- 复用性差，难维护
实现CSS样式隔离的几种方式
- 行内样式，直接在js中编写css
- namespaces
- CSS-in-JS，常见的解决方案有styled-components、styled-jsx、react-style
- CSS Modules
行内样式
优点：
- 写法简单
- 优先级高，有类似独立作用域
缺点：
- 无法复用
- 内容与样式没分离，难维护
src/pages/page5/index.js
import React from 'react'
function Page5() {
return (
<div style={{ background: 'red' }}>page5</div>
)
}
export default Page5
src/pages/page6/index.js
import React from 'react'
function Page6() {
return (
<div style={{background: 'green'}}>page6</div>
)
}
export default Page6
效果图：
namespaces
通过css样式变量的命令来做到作用域隔离
优点：
- 写法简单，没什么需要特别注意的
缺点：
- 团队协作是还是容易出现命名重复的情况出现
src/pages/page7/index.js
import React from 'react'
import styles from './index.less'
function Page7() {
return (
<div className={styles.page7}>
page7
<p>哈哈哈，我是通过namespaces方案区分的</p>
</div>
)
}
export default Page7
src/pages/page7/index.less
.page7 {
background-color: red;
p {
font-size: 15px;
color: #fff;
}
}
src/pages/page8/index.js
import React from 'react'
import styles from './index.less'
function Page8() {
return (
<div className={styles.page8}>
page8
<p>哈哈哈，我是通过namespaces方案区分的</p>
</div>
)
}
export default Page8
src/pages/page8/index.less
.page8 {
background-color: #398def;
p {
font-size: 30px;
}
}
效果图：
CSS-in-JS
通过写js的方式来写css，react官方也是推荐这样来写。官方文档
CSS-in-JS地址，可以看到常见的基于CSS-in-JS的解决方案
优点：
- 解决了css作用域的问题
- 复用性
缺点：
- 一定的学习成本
- 与常见的写法不同
CSS Module
CSS Module本质是通过三方工具如webpack等，把css的变量唯一化
效果图：
从上面可以看出，我设置的类名为styles.header,但是在经过编译后为index__header__2zovj，其实配置一下css-loader开启css modules即可
配置方式：
{
test: /\.css$/,
loader: "style-loader!css-loader?modules"
}
大功告成！！！
总结
其实css作用域的本质，就是页面中的类名都是唯一的。现在通过编译工具，可以把页面中类名编译为一个唯一的类名，这样就不会出现类名相同的情况下相互影响。
综合下来，CSS Module会比CSS-in-JS使用起来更方便，对代码的入侵更小，写法也更符合常见的形式，结合三方工具配置起来也挺方便的。
