Vue笔记 – 样式穿透原理及使用方法

Vue笔记 – 样式穿透原理及使用方法样式穿透1.为什么需要样式穿透在开发中引入了第三方组件库(如element-ui),但又想要修改第三方组件库中组件的样式。组件库中的组件往往都有自己的样式,有时在开发中需要做出一定的调整。但是由于scoped的问题,有时对组件的样式修改会失效。而一旦去掉scoped,又会导致各种组件之间样式

大家好,欢迎来到IT知识分享网。

样式穿透

目录
  • 样式穿透
  • 1. 为什么需要样式穿透
    • 1.1 为什么样式会失效
  • 2. 如何使用样式穿透
    • 2.1 实例

1. 为什么需要样式穿透

  • 在开发中引入了第三方组件库(如element-ui),但又想要修改第三方组件库中组件的样式。

    组件库中的组件往往都有自己的样式,有时在开发中需要做出一定的调整。但是由于scoped的问题,有时对组件的样式修改会失效。而一旦去掉scoped,又会导致各种组件之间样式覆盖,此时就需要使用样式穿透了

  • 需要明确一点:并不是所有第三方组件库组件的样式修改都需要样式穿透 (详情请看下文)

1.1 为什么样式会失效

  • 为什么有时在修改第三方组件样式时,样式不生效?为什么有时又能直接修改?

    /*无效*/
    .el-dialog {
      width: 100%;
    }
    
    /*有效*/
    .el-input {
    	width: 198px;
    }
    

    产生问题的原因很大程度上与scoped有关

  • scoped的原理

    scoped底层是通过在DOM节点中添加data-v-xxxCSS中通过添加[data-v-xxx]属性过滤,提高优先级,来实现样式的私有化。

    也就是说,上面两种组件的运行代码在scoped的作用下实际上长这样:

    • el-input

    Vue笔记 - 样式穿透原理及使用方法

    • el-dialog

    Vue笔记 - 样式穿透原理及使用方法

    由此可以看出一个问题,那就是el-dialog__wrapper下面的子组件并没有被scoped添加标记,也就是说scoped内的样式并没有对它们生效。但是对于el-input,scoped成功对它添加了标记,设置的样式也就能对它生效了

  • 那么在什么情况下scoped会添加标记呢

    scoped在渲染的时候,如果组件内部还有子组件,只会在父组件,以及子组件的根元素加上data-v-xxx属性

2. 如何使用样式穿透

  • less写法

    /deep/ .el-table__body-wrapper {
        cursor: pointer;
    }
    
  • scss写法

    ::v-deep .el-table::before {
        background-color: transparent;
     }
    

2.1 实例

我想要修改element-ui中breadcrumb(面包屑)的字体颜色

直接修改el-breadcrumb__item的字体颜色是不行的,因为字体颜色属性存在于子组件el-breadcrumb__inner之中,因为scoped的影响无法直接修改它的样式,所以只能使用样式穿透

.header-container {
  .l-content {
    /deep/.el-breadcrumb__item {
      .el-breadcrumb__inner {
        font-weight: normal;
        &.is-link {
          color: #666;
        }
      }
      &:last-child {
        .el-breadcrumb__inner {
          color: #fff;
        }
      }
    }
  }
}

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/28002.html

(0)
上一篇 2023-11-28 19:00
下一篇 2023-11-29 21:33

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信