element-ui中 修改分页的样式

默认样式

效果图

修改未选中背景和字体

 /deep/.el-pagination.is-background .el-pager li:not(.disabled) {
      background-color: #0e1423;   // 进行修改未选中背景和字体
       color: #8fb1d2;
      border: 1px solid #4581ae;
      border-radius: 5px;
      width: 40px;
      height: 40px;
      line-height: 40px;
    }

修改选中后的样式

 /deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
      background-color: #2b597d;
      color: #cafbfd;                      //修改选中后的样式
    }

上一页和下一页的样式

  //上一页和下一页的样式
    /deep/.el-pagination.is-background .btn-next{
      //margin: 0 5px;
      background-color: #0e1423;
      color: #8eb1cc;
      min-width: 68px;
      height: 40px;
      border-radius: 5px;
      border:1px solid #4581ae ;
    }
    /deep/.el-pagination.is-background .btn-prev{
      //margin: 0 5px;
      background-color: #0e1423;
      color: #8eb1cc;
      min-width: 68px;
      height: 40px;
      border-radius: 5px;
      border:1px solid #4581ae ;
    }