CSS 样式穿透 • 汇总
迪丽瓦拉
2024-05-30 18:28:18
0次
目录
- 前言
- 何时使用样式穿透？
- 一、样式穿透的实现方式
- 二、不同的 css 预处理语言适用的样式穿透方案
- 三、注意事项
前言
何时使用样式穿透？
- 修改第三方组件库的样式；
- 修改其他组件的私有样式（其样式使用了 scoped 属性）。
一、样式穿透的实现方式
从兼容低版本的视角看。
>>>：- 适用于 css、less 和 stylus。
- 语法：
外层容器 >>> 组件 { }，例如：#app >>> el-button {}。
/deep/：- 适用于 scss 和 less。
- 语法：
外层容器 /deep/ 组件 { }，例如：.main /deep/ el-button {}
::v-deep：适用于 scss 和 less。- 适用于 scss 和 less。
- 语法：
外层容器 ::v-deep 组件 { }，例如：.main ::v-deep el-button {}
二、不同的 css 预处理语言适用的样式穿透方案
从兼容低版本的视角看。
- CSS：推荐使用
>>>。 - Less：推荐使用
/deep/或::v-deep。 - Sass/Scss：推荐使用
/deep/或::v-deep。
三、注意事项
- 操作符
>>>可能会因为 “无法将 CSS 预处理语言 编译成 CSS” 而报错，可以尝试使用/deep/或::v-deep来解决。 - vue3.0 中使用
/deep/会报错，更推荐使用::v-deep。
【参考文章】
CSS 样式穿透的三种方式