React中防止样式覆盖的两种方式

1 

import  "./index.scss";




<button className="button">
</button>

这种方式是我们最常用的一种方式。

一般为了防止样式命名重复覆盖问题，我们都会约定项目组的成员在定义样式的时候，自己页面样式是用文件名为前缀例如：

.activity_content {

}

activity为文件名，activity_content为本页面最外层那个div的className。

2 

import  styles "./index.scss";




<button className={styles.button}>
</button>

这种使用对象的方式使用样式。

这种需要我们在webpack中配置css-loader，可以参考我之前的文章。

在编译阶段解决了样式命名重复覆盖问题。