react项目中，当不同组件中的css规则存在冲突时，高优先级的样式，就会覆盖低优先级的样式，造成样式污染。由此，样式模块化的重要性可见一斑。
先上一个例子：
在以下情况中，App中引入Child组件，App的全局样式会覆盖Child局部设置的样式
App.js
App.css
Child.js
Child.css
呈现的页面效果如下，可知app的全局样式影响了Child的局部样式
下面将记录解决该问题的步骤
①为了更方便地维护样式，我们采用css的与编译器sass/less，这里我以sass为例：
在终端输入npm i --save sass完成安装
②将Child样式文件重命名为Child.module.scss/less并在Child.js中正确引入
这个时候我们会发现页面效果如下：
Child组件以外的样式也被影响了。这是因为react中css样式需要使用class选择器或id选择器
我们需要修改一下Child.module.scss的代码：
同时修改一下Child.js中引用局部样式的代码：
可以看到修改后的页面样式如下，问题解决：
