React如何解决样式污染问题

react样式污染问题

在vue文件中我们使用scoped来进行css模块化开发，使其样式互不受影响。

但是在react中没有scoped属性， 而react中我们发现css样式设置也存在互相影响的问题。

(例如：改变全局样式，设置的样式不起效果，被其他地方的样式覆盖...)

但在react中可以利用module方法来解决：

（1）改样式文件名。从 xx.css -> xx.module.css （React脚手架中的约定，与普通 CSS 作区分）

（2）将写好的css样式引入到对应组件中。

import styles from "xxx.module.css";

 一般命名为styles

（3） 通过 styles 对象访问对象中的样式名来设置样式

注： 避免一个文件有相同的class名称，只生效一个（最后一个覆盖之前所有的）

解析完的类名是一个哈希串。

// css类名是index.module.scss中定义的类名
<div className={styles.css类名}></div>

（4）注意： css类名中如果有 '-' 则要改为styles[ css类名 ]。因为最终这个类名会生成为styles对象上的一个属性。一般推荐使用小驼峰命名法

react防样式污染小助手-css module

react与vue不同，vue可以通过在script中设置scoped来限制样式的生效范围，不至于样式污染,

CSS 的局部作用域解决了大问题。在w3c 规范中，CSS 始终是「全局的」。在传统的 web 开发中，最为头痛的莫过于处理 CSS 问题。因为全局性，明明定义了样式，但就是不生效，原因可能是被其他样式定义所强制覆盖。接手老项目更是噩梦，改对了一个地方的样式，却把另外许多地方的样式打乱。

CSS modules 是从工具层面给出的一套生成局部 CSS 的规范，本质还是生成全局唯一的 CSS 定义。webpack 实现了这套规范。

1.css modules是默认开启的，所以我们只需要将原先的.less或.css文件名称改为.module.less

例：index.css改为index.module.css

//index.module.css
.app {
  background: red;
}

2.在react的js文件引入：

import index from './index.module.css'

3.使用

    <div className={index.App}>
     123
    </div>

4.

可以看到class是一堆啥玩意的名字，实际上它 是 App--<hash数值>，这个 hash 值是全局唯一的，比如通过文件路径来获得，这样 class 名称就做到了全局唯一。

通过全局唯一的 CSS 命名，我们变相地获得了局部作用域的 CSS（scoped CSS）。

如果一个 CSS 文件仅仅是作用在某个局部的话，我们称这样一个 CSS 文件为 CSS module

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论