修改element UI 分页组件样式（解决样式不生效问题）

需要实现的效果：

 1. 正常状态下使用了浅灰色文字 (#e0e0e0)，搭配深色背景 (#2a2a2a)，
 
 2. 鼠标悬停时有优雅的过渡效果：背景色变为淡蓝色，文字变为蓝色，边框变为蓝色
 
 3. 激活状态使用蓝色背景和白色文字

element UI分页组件样式

错误代码

<style lang="scss" scoped>
 ::v-deep.el-pagination.is-background .btn-prev:disabled,
  .el-pagination.is-background .btn-next:disabled {
    color: #c0c4cc;
    background: #2a2a2a;
    min-width: 32px;
    height: 32px;
  }
  ::v-deep .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next {
    margin: 0 5px;
    background-color: #2a2a2a;
    color: #606266;
    min-width: 32px;
    border-radius: 4px;
    height: 32px;
  }
  ::v-deep .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .el-pager li {
    margin: 0 5px;
    background-color: #2a2a2a;
    color: #606266;
    min-width: 32px;
    border-radius: 4px;
    height: 32px;
  }
</style>

正确代码

<style lang="scss">
 .el-pagination.is-background {
    .btn-prev:disabled,
    .btn-next:disabled {
      color: #c0c4cc;
      background: #2a2a2a;
      min-width: 32px;
      height: 32px;
    }

    .btn-prev,
    .btn-next,
    .el-pager li {
      margin: 0 5px;
      background-color: #2a2a2a;
      color: #e0e0e0;
      min-width: 32px;
      border-radius: 4px;
      height: 32px;
      border: 1px solid transparent;
      transition: all 0.3s;

      &:hover {
        color: #1890ff;
        background-color: rgba(24, 144, 255, 0.1);
        border-color: #1890ff;
      }

      &.active {
        background-color: #1890ff !important;
        color: #fff !important;
        border-color: #1890ff;
      }
    }

    .el-pager li.active {
      background-color: #1890ff !important;
      color: #fff !important;
      border-color: #1890ff;
    }
  }
</style>

tips

 一定要将style标签中的 scoped 字段去掉