1、背景

在同一个项目中，使用到了两个不同背景的分页。暂且将白色背景的命名为P1,灰色背景的命名为P2。 ​ ​

2、问题

为了做全局的light和dark模式转换，我在P1中设置了:

.el-pager li {
    @include background_color("sidebar-bg-color");
}

效果是这样:

[data-theme="light"] .el-pager li {
    background: #fff !important;
}

然后问题就出现了，由于我直接设置了 .el-pager li 的样式，变成全局生效，导致P2变成了这样： ​

将我给P2定义的样式给覆盖掉了：

​

3、解决

在使用到的每个分页处，添加属于自己的class。

<el-pagination class="projectCase-class"  //添加一个独一无二的class类
    @current-change="handleCurrentChange"              
    :current-page.sync="currentPage" 
    :page-size="params.pageSize"
    layout="total, prev, pager, next" 
    :total="totalCount" >
</el-pagination>

.projectCase-class .el-pager li{
    @include background_color("app-backgroud-color");
}

在vue中，如果只想修改当前页面的el-pagination的样式，css必须通过一个独一无二的class类进行包裹，不然会造成全局污染，影响其他页面的el-pagination样式。