美文网首页
修改第三方组件的样式

修改第三方组件的样式

作者: 泪滴在琴上 | 来源:发表于2021-01-08 10:24 被阅读0次

    样式穿透

    在开发中修改第三方组件样式是很常见,但由于 scoped 属性的样式隔离,可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用(组件样式污染、不够优雅),样式穿透在css预处理器中使用才生效。

    我们可以使用 >>> 或 /deep/ 解决这一问题:

    <style scoped>
    外层 >>> .el-checkbox {
      display: block;
      font-size: 26px;
    
      .el-checkbox__label {
        font-size: 16px;
      }
    }
    </style>
    
    <style scoped>
    /deep/ .el-checkbox {
      display: block;
      font-size: 26px;
    
      .el-checkbox__label {
        font-size: 16px;
      }
    }
    </style>
    

    相关文章

      网友评论

          本文标题:修改第三方组件的样式

          本文链接:https://www.haomeiwen.com/subject/yartaktx.html