React样式的模块化

前言

  在React中，为了解决不同界面中具有相同类名导致样式冲突的问题，从而产生了样式的模块化，类似于Vue中的scoped指令。

设置方式

  在webpack.config.js文件中，添加modules参数，启用CSS的模块化。

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

  localIdentName是设置生成的类名的格式。

  一般，我们使用的第三方UI组件，他们的样式表文件，都是以.css结尾的，所以，我们最好不要为.css后缀名的文件，启用模块化。我们可以手写scss或less的样式文件，这样，我们只需要为scss文件或less文件启用模块化就好了。

引入样式文件

  默认情况下，如果没有为CSS启用模块化，则接收到的itemStyles是个空对象。当启用CSS模块化之后，导入样式表得到的itemStyles就变成了一个样式对象，其中，属性名是在样式表中定义的类名，属性值是自动生成的一个复杂的类名（防止类名冲突）。

import itemStyles from '../../css/CommentItem.css'

  CommentItem.css文件内容：

.box{
    border: 1px solid #cccccc;
    padding-left: 15px;
    box-shadow: 0 0 6px #cccccc;
    margin: 10px 0;
}
.title{
    color: green;
    font-size: 16px;
}
.body{
    font-size: 14px;
    color: red;
}

  console.log(itemStyles);输出的内容：

界面上使用：

<div className={itemStyles.box}>
    <h1 className={itemStyles.title}>评论人</h1>
    <h3 className={itemStyles.body}>评论内容</h3>
</div>

注意问题：

  注意：当启用CSS模块化之后，这里所有的类名，都是私有的，如果想要把类名设置成全局的一个类，可以把这个类名，用:global()给包裹起来，当使用:global()设置了全局的类样式之后，这个类不会被重命名，只有私有的类才会被重命名。

  在CommentItem.css文件中添加：

:global(.title){
    color: purple;
    text-align: center;
}

  此时console.log(itemStyles);输出的内容：

  界面上使用全局.title类的方式：

<h1 className="title">娃哈哈</h1>