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 ;
    }