vue 样式穿透

2022-08-11  本文已影响0人  苍老师的眼泪

在如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,但由于scoped属性的样式隔离,可能需要去除scoped或是另起一个style。这些做法都会带来副作用(组件样式污染、不够优雅),样式穿透在css预处理器中使用才生效。

less使用 /deep/
.content /deep/ .el-button {
height: 60px;
}

scss使用::v-deep
.content ::v-deep .el-button {
height: 60px;
}

scss使用/deep/
.xsz_image_url /deep/ img {
padding-top: 14px;
width: 160px;
border-radius: 5px;
}

scss使用:deep()

detect_args :deep(.el-select .el-input.is-focus .el-input__inner) {

border-color: coral !important;
}

stylus使用>>>
外层 >>> .custon-components{
height: 60px;
}

上一篇 下一篇

猜你喜欢

热点阅读