vue样式加入scoped后无法修改elementUI的样式,穿透＞＞＞或/deep/

最新推荐文章于 2022-11-08 11:34:37 发布

前端小白的逆袭

最新推荐文章于 2022-11-08 11:34:37 发布

阅读量1.3k

点赞数 2

分类专栏： Web前端 VUE 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Kindergarten_Sir/article/details/109741950

版权

Web前端同时被 2 个专栏收录

140 篇文章 8 订阅

订阅专栏

VUE

10 篇文章 0 订阅

订阅专栏

在VUE中通过给style标签添加scoped来方式样式的全局污染，但有些情况我们需要更改elementUI的样式，却因为scoped的原因导致无法修改。
此时可以使用穿透符>>>，如果>>>无法解析，可以使用/deep/代替，代码如下：

/* 折叠面板title */
.oc-ml >>> .el-collapse-item__header {
  text-align: center;
  display: block;
  font-size: 18px;
  font-weight: bold;
}

/* 如果'>>>'无法被解析可以使用/deep/ */
/deep/ .el-collapse-item__header {
  text-align: center;
  display: block;
  font-size: 18px;
  font-weight: bold;
}