React不用less 解决样式冲突问题

当两个组件中的 ClassName 名称相同时 在组件引入的时候就会发生后引入的组件样式会覆盖之前引入的组件样式

这里讲的是不通过 less 去解决，用于记录一下。

如图：

当两个组件的 className 都为 title时

此时位Body组件后引入背景色为绿色

当Hand 组件后引入是背景色为红色

 

解决方案

1.将原本的 index.css 文件改为  index.module.css   文件

2. 引入的方式由      import './index.css' 

     改为                    import Body from './index.module.css'

3.使用的方式由 

<h1 className="title"> Hand组件 </h1> 

改为

<h1 className={Body.title}> Hand组件 </h1>

就可以不用less去解决这个问题