zoukankan      html  css  js  c++  java
  • Vue中scoped穿透 修改子组件样式

    scoped看起来很好用,但是在Vue项目中,scope会阻挡我们修改第三方组件样式。
    当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。
    1、stylus的样式穿透 使用 >>>

    .wrapper >>> .swiper-pagination-bullet-active
     background: #fff
    

    2、sass和less的样式穿透 使用 /deep/ (记得一定要加上外层选择器)
    外层 /deep/ 第三方组件 {
    样式
    }

    .wrapper /deep/ .swiper-pagination-bullet-active{
      background: #fff;
    }
    

    实际项目中的应用截图,这个项目是要修改分页器按钮的颜色,官方默认是蓝色的,现在要改成绿色。

    方法一:额外增加一个style scoped
    在这里插入图片描述
    方法二:不用额外增加一个style scoped,直接在上一级style scoped写即可
    在这里插入图片描述在这里插入图片描述
    那么问题就来了,如果我想把项目中的所有分页蓝色按钮修改成绿色,该怎么办?
    很简单,只需在公共样式文件里书写即可:
    在这里插入图片描述
    前提是需要在用到的组件中写上对应的类名(class = “Pagination”)
    在这里插入图片描述
    此时,整个项目中的蓝色分页按钮就会变成绿色。
    如果此时,我又想把其中一个组件的分页器按钮改成红色,又该怎么办?也很简单,这个时候只需在需要修改的组件中单独做一个样式穿透就可以了,详见上面说的方法一,方法二

    活到老,学到老。 踏实+激情+坚持
  • 相关阅读:
    bzoj3505 数三角形 组合计数
    cogs2057 殉国 扩展欧几里得
    cogs333 荒岛野人 扩展欧几里得
    bzoj1123 BLO tarjan求点双连通分量
    poj3352 road construction tarjan求双连通分量
    cogs1804 联合权值 dp
    cogs2478 简单的最近公共祖先 树形dp
    cogs1493 递推关系 矩阵
    cogs2557 天天爱跑步 LCA
    hdu4738 Caocao's Bridge Tarjan求割边
  • 原文地址:https://www.cnblogs.com/andyZhang0511/p/12246469.html
Copyright © 2011-2022 走看看