为什么需要样式穿透?
- 引入了第三方组件库(如element-ui、element-plus),并想修改第三方组件库的样式。
- 样式文件中使用了 scoped 属性,但是为了确保每个组件之间不存在相互影响所以不能去除(去除scoped属性会变成全局样式对其他组件也造成影响)。
样式穿透的三种写法
- 原生CSS样式穿透 (操作符 >>>):>>>
外层 >>> 第三方组件{ 样式 }
.wrapper >>> .el-image {
width: 100px
}
- less的样式穿透(深度选择器/deep/) :/deep/
项目中用到了预处理器 less ,可以使用 /deep/。
/deep/ 第三方组件 {样式}
/deep/ .el-table__body-wrapper {
cursor: pointer;
}
- scss样式穿透(深度选择器::v-deep):::v-deep
::v-deep 第三方组件 {样式}
::v-deep .el-table::before {
background-color: transparent;
}