问题描述
- 当不同组件中的css规则，存在冲突时，高优先级的样式，就会覆盖低优先级的样式，示例如下：
-
目录结构
-
样式冲突
-
Welcome 组件后引入，因此覆盖Hello组件的样式
-
如下
- 当组件越来越多的时候，我们当然不想组件之间产生干扰，看如下两种解决方案
解决方案
css预处理工具（更常用）
- 通过给样式加上区分组件的前缀，避免样式的冲突
.hello {
h1 {
background-color: tomato;
}
}
.welcome {
h1 {
background-color: gold
}
}
/* 会被翻译成这样 */
.hello h1 {
background-color: tomato;
}
.welcome h1 {
background-color: gold;
}
-
再给组件加上类名
css 模块化
-
首先需要将样式文件后缀修改为 .module.css
-
样式如下
-
引入时
-
效果如下
网友评论