一般情况下,是在项目中引入了第三方的 UI 库(例如:ElementUI)时,我们需要通过“样式穿透”来更改样式。
一、语法
样式穿透的语法分为三种:
>>>
:作用于 CSS 中;::v-deep
:作用于 SASS 中;/deep/
:作用于 LESS 中;
注意:所有的样式穿透语法,都只能在局部样式中生效。
父级选择 >>> 选择器 {
样式名: 样式值;
}
父级选择 ::v-deep 选择器 {
样式名: 样式值;
}
父级选择 /deep/ 选择器 {
样式名: 样式值;
}
二、修改 UI 框架的样式
通常我们在使用 UI 框架时,不会完全使用 UI 框架自带的样式,大部分时候都需要手动去更改 UI 框架的自带样式。
更改 UI 框架的自带样式的方式有以下几种:
- 官方提供的属性;
- 设置当前组件的局部样式;
- 提高选择器的权重值;
- 样式穿透;
- 添加 !important;
- 改为全局样式;