一.概述
①问题: 一个组件的样式会影响另一个组件的样式。
②原因:在配置路由时, 两个组件都被导入到项目中,那么组件的样式也就被导入到项目中了。如果组件之间样式名称相同,那么一个组件中的样式就会在另一 个组件中也生效,从而造成组件之间样式相互覆盖的问题。
③结论:默认：只要导入了组件,不管组件有没有显示在页面中,组件的样式就会生效。
④如何解决?
- 手动处理 (起不同的类名)
- 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的使用
注意点：
