修改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 字段去掉