如何修改Vuetify 3中VExpansionPanel展开图标的hover颜色？

要实现鼠标悬停时展开/折叠图标切换颜色，你可以通过深度选择器穿透Vuetify组件的封装样式，直接定位图标元素并设置hover状态样式，具体操作如下：

1. 保留原有模板代码 #

<VExpansionPanels class="py-6 px-16">
  <VExpansionPanel
    expand-icon="material-symbols:arrow-circle-down-outline-rounded"
    collapse-icon="material-symbols:arrow-circle-up-outline-rounded"
    v-for="faq in faqs"
    :key="faq.question"
    :title="faq.question"
    :text="faq.answer"
    class="expansion-panel mb-2"
  />
</VExpansionPanels>

2. 添加Scoped样式 #

在组件的<style>标签中使用:deep()深度选择器，指定悬停时的图标颜色：

<style scoped>
/* 可选：给图标添加过渡动画，让颜色变化更平滑 */
:deep(.expansion-panel .v-expansion-panel-header__icon) {
  transition: color 0.2s ease;
}

/* 鼠标悬停时统一切换图标颜色 */
:deep(.expansion-panel:hover .v-expansion-panel-header__icon) {
  color: #1976d2; /* 替换成你需要的目标颜色 */
}

/* 进阶：区分展开/折叠状态的悬停颜色 */
:deep(.expansion-panel:not(.v-expansion-panel--active):hover .v-expansion-panel-header__icon) {
  color: #2196f3; /* 未展开时的悬停颜色 */
}

:deep(.expansion-panel.v-expansion-panel--active:hover .v-expansion-panel-header__icon) {
  color: #ff5722; /* 已展开时的悬停颜色 */
}
</style>

关键说明 #

• :deep()是Vue3中用于穿透scoped样式的选择器，能访问到Vuetify组件内部的DOM元素类名
• .v-expansion-panel-header__icon是Vuetify展开面板头部图标的默认类名
• 可根据需求调整颜色值和过渡动画参数，实现个性化效果

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