一直以为 防止样式感染StylusLess等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的样式是唯一的。

——起到了防止样式感染的作用。

拓展

Webpack5 配置 CssModules react-css-modules css-loader