CSS样式穿透

发表于 2022-06-16 分类于 Web前端阅读次数：本文字数： 535 阅读时长 ≈ 1 分钟

引入

在 Vue 项目中引入 ElementUI 等组件库时，经常需要修改某个组件的原有样式。但我们在编写 css 样式时，都会在 <style> 标签中加上 scope 属性，这样编写的样式就只会在当前的组件上生效，不会影响到其他组件。这也带来一个问题：在带有 scope 属性的 <style> 标签中编写的修改某个组件的原有样式不会生效。

样式穿透

为了解决这个问题，需要使用到样式穿透。样式穿透的三种方式：

>>>
::v-deep
/deep/

注意：>>> 只作用于CSS，::v-deep 和 /deep/ 可以用于 Sass 和 Less

语法示例

外层 >>> 第三方组件 {
	样式
}
.conBox >>> .ivu-input {
	text-align: center!important;
}

外层 ::v-deep 第三方组件 {
	样式
}
.conBox ::v-deep .el-input__inner{
    padding:0 10px;
}

外层 /deep/ 第三方组件 {
	样式
}
.conBox /deep/ .el-input__inner{
    padding:0 10px;
}