vue.js修改第三方组件（elementUI）样式 ,穿透修改样式

最新推荐文章于 2025-04-10 09:57:53 发布

能c能v

最新推荐文章于 2025-04-10 09:57:53 发布

阅读量4.9k

点赞数 2

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/qq_43391160/article/details/103125972

版权

vue.js 专栏收录该内容

18 篇文章

订阅专栏

本文深入解析了CSS中三种实现样式穿透的方法：使用大于号(>>>)、/deep/选择器以及Less和Sass预处理器。通过具体代码示例展示了如何针对第三方组件进行样式定制，适用于.vue文件内样式作用域限制下的样式覆盖需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

外层类 >>> 第三方（类名）{

样式

}

 .login >>> .el-input__inner {
    border: 1px solid transparent !important;
    background: transparent;
    color: white;
    border-bottom: 1px solid white !important;
  }

2./deep/ 第三方（类名）{

样式

}

<style scoped>
.a::v-deep .b { /* ... */ }
</style>

 /deep/ .el-input__inner {
    border: 1px solid transparent !important;
    background: transparent;
    color: white;
    border-bottom: 1px solid white !important;
  }

3.less 和 sass 样式穿透。

外层类 /deep/ 第三方{

式样

}

eg:

.content-btm /deep/ .el-form-item__label{
color: white;
}