开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第35天，点击查看活动详情

写在前面

本篇是react学习的第三篇，介绍什么是css模块样式

css模块样式

我们平常的样式的命名方式是[name].css，而css模块样式的命名方式是[name].module.css，先说说他的作用：css模块样式允许我们在不同的css文件中使用相同的css类名

就上面一句话可能不太好理解，那我们就在项目中实验一下，首先，在src目录下新增一个Button文件夹，Button文件夹下新增Button.js文件、Button.css文件、Button2.css文件、Button.module.css文件、Button2.module.css文件，文件的代码分别如下：

Button.js：

import React, { Component } from 'react';
import styles from './Button.module.css'; // 引入css模块样式
import styles2 from './Button2.module.css'; // 引入css模块样式
import './Button.css'; // 引入常规样式
import './Button2.css'; // 引入常规样式

class Button extends Component {
  render() {
    return (
        <div>
            <button className={styles.error}>module.css</button>
            <button className={styles2.error}>module.css</button>
            <button className='error'>css</button>
        </div>
    );
  }
}

export default Button;

Button.css：

.error {
    background-color: red;
}

Button2.css：

.error {
    background-color: green;
}

Button.module.css：

.error {
    background-color: blue;
}

Button2.module.css

.error {
    background-color: yellow;
}

可以看到，每个css的background-color颜色都不一样，同时我们在Button.js中引入了这四个样式文件，并且在html使用了，常规样式使用的时候是谁后引入用谁，模块样式因为给了一个引入名称（styles、styles2），所以不会重复。

接下来，为了在页面上更直观地看到效果，我们在App.js中引入并使用Button组件，App.js代码变为如下：

import './App.css';
import Button from '../Button/Button';

function App() {
  return (
    <div className="App">
      <Button/>
    </div>
  );
}

export default App;

页面显示如下：

使用css模块样式的按钮颜色不会因为重复而被替换掉，使用常规样式的按钮颜色会因为样式名称重复而被替换掉，通过这样一个例子应该能很清楚地理解了。

提示：如果要使用Sass预处理样式表，按如下方式更改样式表文件扩展名：[name].module.scss或[name].mdule.Sass。

写在最后

以上就是css模块样式所有代码和说明

react入门3：css模块样式

写在前面

css模块样式

写在最后