更改 vuetify 扩展面板标题中扩展图标的颜色答案

【问题标题】：change the color of expand-icon in vuetify expansion-panel-header更改 vuetify 扩展面板标题中扩展图标的颜色
【发布时间】：2020-11-08 07:42:03
【问题描述】：

我正在使用 Vuetify 扩展面板，只想将标题中扩展面板的颜色更改为白色。不幸的是，该 api 没有任何扩展图标颜色的选项，只有标题背景的颜色。 Link

<v-expansion-panels>
  <v-expansion-panel>
    <v-expansion-panel-header expand-icon="mdi-menu-down" color="#4527A0">
      <div><b> I am Header </b></div>
    </v-expansion-panel-header>
    <v-expansion-panel-content color="#F1F8E9">
      <div><b> I am Content </b></div>
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我认为没有任何 API 只用于颜色，但您可以传递自定义图标并从那里更改颜色。下面的示例将具有与默认形状相同的形状，但具有自定义颜色。

<v-expansion-panel-header>
   <template v-slot:actions>
            <v-icon color="primary">
              $expand
            </v-icon>
          </template>
</v-expansion-panel-header>

【讨论】：