一直以为 防止样式感染 是Stylus
、Less
等CSS框架的功能。
后来才发现,并不是!
防止样式感染是react-css-modules
插件提供的功能。
什么是样式感染?
样式感染是指不同页面中拥有同一样式名的css样式,并且不同文件对该样式进行不同操作,导致两个页面的样式互相影响的现象。
原始css样式文件在项目中是“全局的”,所有分布在不同文件中的css最终都会编译打包合成一个大的css文件。
这样会导致编写代码时,不同文件里同名的css样式会有冲突,最后导致部分样式失效。
为了防止这种情况产生,需要使用防止样式感染的依赖组件。如react-css-modules
这些组件会在编译时将不同文件名中的css样式重命名,使新的命名能够做到全局唯一,这样就可以避免样式冲突。
react-css-modules使用
1、安装
npm install react-css-modules
2、添加引用依赖
npm install @types/react-css-modules --save-dev
3、使用
1.导入react-css-modules
import CssModules from 'react-css-modules'
2.使用styleName替换className
<div styleName="bg_board">
<div styleName="bg_reward">
<div styleName="reward_tips">
<p>测试</p>
</div>
</div>
</div>
3.用CssModules连接CSS与JS文件
export default CssModules(Demo, require('./demo.styl'))
完整示例:
import React, { useCallback, useState } from 'react'
import CssModules from 'react-css-modules'
function Demo(props) {
return (
<div styleName="bg_board">
<div styleName="bg_reward">
<div styleName="reward_tips">
<p>测试</p>
</div>
</div>
</div>
);
}
export default CssModules(Demo, require('./demo.styl'))
运行
使用npm run start
命令运行项目。
运行之后会发现,最后生成的css名字,会在css代码名字的前后加上随机字符,
这样做的目的是为了保证每个css的样式是唯一的。
——起到了防止样式感染的作用。
暂无评论