修改Element UI的样式，可以通过几种方法来实现

修改Element UI的样式，可以通过几种方法来实现
这里已分页器来讲解

1. 使用Scoped CSS

在您的

Pagination.vue

组件文件中，使用Scoped CSS来覆盖Element UI的默认样式。这将确保您的样式只应用于这个特定的组件，而不会影响到其他使用Element UI分页器的组件。

<style scoped>
/* 这里可以直接使用 Element UI 的 CSS 类名来定位元素 */
.el-pagination .btn-prev, .el-pagination .btn-next {
  background-color: #f5f5f5; /* 举例：更改分页按钮的背景颜色 */
}

.el-pagination .el-input .el-input__inner {
  border-color: #dcdfe6; /* 举例：更改输入框的边框颜色 */
}

/* 更多样式覆盖 */
</style>

2. 使用深度选择器

如果您需要覆盖的样式是由Element UI的CSS变量控制的，或者您想要确保您的样式优先级高于Element UI的默认样式，可以使用深度选择器（

/deep/

或

>>>

）。

<style scoped>
/* 使用深度选择器 */
::v-deep .el-pagination__editor .el-input .el-input__inner {
  border-color: #dcdfe6; /* 举例：更改输入框的边框颜色 */
}

::v-deep .el-pagination .btn-prev, .el-pagination .btn-next {
  background-color: #f5f5f5; /* 举例：更改分页按钮的背景颜色 */
}

/* 更多样式覆盖 */
</style>

3. 修改Element UI的主题变量

Element UI使用CSS变量（Custom Properties）来定义主题样式。您可以通过在您的项目中设置这些变量来改变Element UI组件的默认外观。这种方法需要您对CSS变量有一定的了解，并且需要在组件使用之前设置这些变量。

/* 在您的全局样式文件中设置 */:root{--el-color-primary: #409eff;/* Element UI 主色调 */--el-pagination-bg-color: #f5f5f5;/* 分页背景颜色 */--el-pagination-disabled-bg-color: #f5f5f5;/* 禁用状态下的背景颜色 *//* 更多Element UI主题变量 */}

4. 使用内联样式

虽然不推荐，但在某些情况下，您可以直接在组件的模板中使用内联样式来修改分页器的样式。

<template>
  <el-pagination
    :current-page.sync="currentPage"
    :page-size.sync="pageSize"
    :total="total"
    :layout="layout"
    style="background-color: #f5f5f5;"  // 直接在模板中设置内联样式
  >
  </el-pagination>
</template>

注意事项

• 使用Scoped CSS和深度选择器时，确保选择器的特异性不会影响其他组件。
• 修改Element UI的主题变量是一个全局性的改变，可能会影响项目中所有使用Element UI组件的样式。
• 内联样式虽然方便快捷，但不利于样式的复用和管理，应尽量避免使用。

根据您的具体需求和项目结构，选择最适合您的方法来修改分页器的样式。