欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

element组件修改样式 分页器修改样式 >>>穿透

程序员文章站 2022-06-07 14:26:27
...

https://blog.csdn.net/Alex81320/article/details/86234369
vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>,穿透scoped。

有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名)

<style scoped>

  外层 >>> 第三方组件 {

      样式

  }

/deep/  第三方组件 {

      样式

  }

</style>

网上七七八八的基本全是抄一个人的 讲的一知半解的 根本没办法实现 就看了一个人的有用 感谢大佬
但是大佬对>>>没有讲解 我一开始放在外部style有没有实现 不过去查了一下>>>之后 放在scoped中就实现了
https://blog.csdn.net/CherryLee_1210/article/details/100514286
element组件修改样式 分页器修改样式 >>>穿透

 <div  class="pager-box">
      <el-pagination
       
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="index"
        :page-sizes="[6]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableCopyTableList.length"
      ></el-pagination>

     </div>
.pager-box>>>button,
.pager-box>>>.el-pager li {
    background-color: transparent !important;
    color: #0256FA !important;
    border: 1px solid #0672C4;
}

.pager-box>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color:  #0258FF !important;
    color: white!important;
}


相关标签: vue.js css