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

样式穿透

• 样式穿透
• 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-xxx，CSS中通过添加[data-v-xxx]属性过滤，提高优先级，来实现样式的私有化。

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

  • el-input

  

  • el-dialog

  

  由此可以看出一个问题，那就是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;
        }
      }
    }
  }
}