在react中使用css modules解决组件之间样式覆盖问题

今天在写react项目的时候发现两个组件之间相同类名之间样式会发生覆盖的问题，上网查了一下，大佬们都推荐使用css IN JS

简单介绍一下自己的使用：come on baby

介绍：css in js是使用js编写css统称，用来解决css样式冲突，覆盖等问题

css in js 的具体实现有50多种，其中两种是比较出名的：css modules和styled-components

在react中推荐使用：css modules，因为react脚手架已经集成进来了，可以直接使用

• css modules 通过对css类名的重命名，保证每一个类名的唯一性，从而避免样式冲突问题
• 实现方式：webpack的css-loader插件
• 在react脚手架中演化成：文件名，类名，hash（随机）三部分，只需要指定类名即可。

在index.module,css中我们写一个类名
.red{

}
通过css modules就会给我们转化成类名
.Button_error_axy4s

 css modules  在项目中的使用

1.首先创建一个名为index.module.css的样式文件，（这是react中约定的，与普通css区分开）

在要使用的文件中创建样式文件名称
index.module.css

2.在组件中导入样式文件（注意语法）

在要使用的文件在中进行引入
import styles from './index.modu