Element组建样式修改 deep 深度作用选择器 scoped

最新推荐文章于 2024-11-06 18:42:28 发布

原创最新推荐文章于 2024-11-06 18:42:28 发布 · 978 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #less #sass

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

Element

2 篇文章

订阅专栏

本文探讨了解决Element UI组件样式修改难题的方法，通过使用深度作用选择器（/deep/ 或 >>>），可以有效地仅针对当前页面的组件进行样式定制，避免影响其他页面的样式，同时提供了具体的代码示例。

一般修改element组建的样式,会遇到两个问题:
1:直接修改,样式不起作用
2:把style标签的scoped去除,但是这样一来,会影响其他页面的的样式

如何只修改本页面的组建样式
我们需要用到深度作用选择器,deep
例如下代码所示

<style lang="less" scoped>
  /deep/ .course {
    .el-tabs__nav-wrap {
      padding-left: 20px;
    }
    .el-tabs__nav .el-tabs__item {
      font-weight: 400;
      color: #444444;
      font-size: 20px;
      margin: 10px 0;
    }
    .el-tabs__item.is-active {
      color: #649CEE;
      font-weight: 600;
    }
  }
</style>

但如果加了deep后样式还是不起作用,那就是deep作用的层级不一样,需要考虑是不是父类不对.