在react中实现CSS模块化

时间：2023-12-26 11:46:19

　　react中使用普通的css样式表会造成作用域的冲突，css定义的样式的作用域是全局，在Vue 中我们还可以使用scope来定义作用域，但是在react中并没有指令一说，所以只能另辟蹊径了。下面我将简单记录并介绍一下在webpage配置实现css 的模块化。

webpack的配置： 截取一小段

 {
test: /\.css/,use:['style-loader','css-loader?modules$localIdentName=[path][name]-[local]-[hash]']
}

在react中实现CSS模块化

如上所示：

这里讲解一下localIdentName自定义生成的类名格式，可选参数有：

  • [path]表示样式表相对于项目根目录所在的路径
  • [name] 表示样式表文件名称
  • [local] 表示样式表的类名定义名称
  • [hash:length] 表示32位的hash值

注意：只有类名选择器和ID选择器才会被模块化控制，类似body  h2 span 这些标签选择器是不会被模块化控制

使用过程如下：

import cname from '@xxx.css'  => .title{color:red;}
//这里你可以输出测试一下cname的值 console.log(cname)
//react中的部分代码
render(){
　　return(
　　<div>
　　　　<h2 className={cname.title}>这里是标题<h2>
　　</div>
)
}

一句HTml多类名配置如下：

//test 为全局样式 通过加空格实现

<h1 className={[cname.title, 'test'].join(' ')}></h1>

当然这里还有一种情况就是在模块化的样式表中，你不希望某个类或者ID被模块化，想让他成为全局样式，可以通过：global配置： .test是你不希望被模块化的类

//被：global包裹起来的类名，不会被模块化，而是会全局生效
：global(.test){

  color:blue;

}

相关文章