React样式冲突解决问题的方法

目录

• 前言：
• CSS IN JS
• 一、概念
• 二、CSS Modules
• 三、在项目中使用css Modules
• 四、css module配合sass
• 五、module.scss 使用步骤：
• 六、总结

前言：

1、React最终编译打包后都在一个html页面中，如果在两个组件中取一样类名分别引用在自身，那么后者会覆盖前者。
2、默认情况下，只要导入了组件，不管组件有没有显示在页面中，组件的样式就会生效。

解决方案：

• 手动处理 （起不同的类名，但是项目一大就会导致类名很乱，不利于团队协作）
• CSS IN JS ： 以js的方式来处理css（推荐）
• css不是一门编程语言，css没有所有的局部作用域全局作用域这样的区分。。。css只有全局作用域

CSS IN JS

一、概念

CSS IN JS：是使用 JavaScript 编写 CSS 的统称，用来解决 CSS 样式冲突、覆盖等问题

CSS IN JS 的具体实现有 50 多种，比如：React常用（CSS Modules、styled-components）、 Vue常用（