解决组件样式覆盖问题

一.概述

①问题: 一个组件的样式会影响另一个组件的样式。
②原因:在配置路由时, 两个组件都被导入到项目中,那么组件的样式也就被导入到项目中了。如果组件之间样式名称相同,那么一个组件中的样式就会在另一 个组件中也生效,从而造成组件之间样式相互覆盖的问题。
③结论:默认：只要导入了组件,不管组件有没有显示在页面中,组件的样式就会生效。
④如何解决?

• 手动处理 (起不同的类名)
• CSS IN JS
   

二.CSS IN JS

• CSS IN JS :是使用JavaScript编写CSS的统称,用来解决CSS样式冲突、覆盖等问题
• CSS IN JS的具体实现有50多种,比如: CSS Modules、styled-components 等
• 推荐使用: CSS Modules ( React脚手架已集成，可直接使用)

三、CSS Modules的说明

•  CSS Modules通过对CSS类名重命名,保证每个类名的唯一性,从而避免样式冲突的问题
• 换句话说:所有类名都具有“局部作用域”, 只在当前组件内部生效
• 实现方式: webpack的css-loader插件
• 命名采用: BEM ( Block块、Element 元素、Modifier 三部分组成)命名规范,比如: .list_ item_ active
• 在React脚手架中演化成:文件名、类名、hash(随机)三部分,只需要指定类名即可

 四、CSS Modules的使用

注意点：