React

react的css局部作用域

vue中防止样式污染可以在style中设置scoped来处理，而react中没有直接对应的功能。查阅资料后得知，webpack中包含了CSS modules这个工具来解决该问题。

  • CSS modules是默认开启的，所以只需要将原先的.less或.css文件名称改为.module.less和.module.css即可。
1
2
3
4
// index.module.less
.header{
  padding: 10px 0;
}
1
2
// jsx中引入
import styles from './index.module.less'

使用样式：

1
<header className={styles.header}>header</header>

此时该类名会变为类名--hash值的形式，以产生css局部作用域的效果。