如何修改Vuetify 3中<v-pagination>组件的图标颜色？

下面提供几种实用方法修改组件中“上一页”和“下一页”按钮的图标颜色：

方法1：单文件组件内的深度样式（推荐） #

给分页组件添加自定义类，通过深度选择器穿透Vuetify的组件样式：

<template>
  <v-pagination
    v-model="currentPage"
    :length="100"
    :total-visible="total"
    class="custom-pagination"
  >  
  </v-pagination>
</template>

<style scoped>
:deep(.custom-pagination .v-pagination__prev .v-icon),
:deep(.custom-pagination .v-pagination__next .v-icon) {
  color: #ff4081; /* 替换为你需要的颜色值 */
}
</style>

方法2：全局样式修改 #

如果希望整个项目的分页组件都应用该样式，可在全局CSS文件（如styles/main.css）中添加：

.v-pagination__prev .v-icon,
.v-pagination__next .v-icon {
  color: #2196f3; /* 自定义颜色 */
}

方法3：结合Vuetify主题系统 #

若想让图标颜色与项目主题统一，可先在Vuetify配置中定义自定义颜色变量，再引用它：

1. 配置Vuetify主题 #

// main.js 或 Vuetify配置文件
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'

const vuetify = createVuetify({
  theme: {
    defaultTheme: 'customTheme',
    themes: {
      customTheme: {
        colors: {
          primary: '#1976D2',
          paginationIcon: '#ff9800', // 自定义分页图标颜色变量
        },
      },
    },
  },
})

createApp(App).use(vuetify).mount('#app')

2. 引用主题颜色 #

<template>
  <v-pagination
    v-model="currentPage"
    :length="100"
    :total-visible="total"
    class="theme-pagination"
  >  
  </v-pagination>
</template>

<style scoped>
:deep(.theme-pagination .v-pagination__prev .v-icon),
:deep(.theme-pagination .v-pagination__next .v-icon) {
  color: var(--v-theme-paginationIcon);
}
</style>

内容的提问来源于stack exchange，提问作者Anemoiaa