vue引用了第三方组件,有时候我们需要改写第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>,穿透scoped。
有些Sass 之类的预处理器无法正确解析 >>> 这时可以使用 /deep/ 操作符( >>> 的别名)
<style lang="scss" scoped>
自定义class(外层) >>> 第三方组件class {
具体的样式内容
}
自定义class(外层) /deep/ 第三方组件class {
具体的样式内容
}
// 当然也可以直接这样写:
>>> 第三方组件class {
具体的样式内容
}
// 比如:
>>> .el-modal__header__title {
width: 80px;
height: 22px;
font-size: 16px;
font-family: PingFangSC-Medium,PingFang SC;
font-weight: bold;
color: rgba(0,0,0,1);
line-height: 22px;
}
/deep/ 第三方组件class {
具体的样式内容
}
// 比如
/deep/ .el-icon-triangle-bottom {
color: #b2b9cc;
margin-left: auto;
margin-right: 10px;
}
</style>