如何取消Vuetify中<v-card-actions>内按钮的plain样式？

Vuetify的<v-card-actions>组件会默认给内部的<v-btn>添加plain属性，导致按钮显示为扁平无背景的样式。要恢复按钮的常规样式，有两种直接的解决方式：

方式一：给按钮显式指定变体样式 #

给每个<v-btn>添加variant="elevated"（这是Vuetify按钮的默认常规样式），覆盖掉<v-card-actions>的默认设置：

<template>
  <v-card>
    <v-card-title>MyCard</v-card-title>
    <v-card-text></v-card-text>
    <v-card-actions>
      <v-btn variant="elevated">Revert</v-btn>
      <v-spacer/>
      <v-btn variant="elevated">Cancel</v-btn>
      <v-btn variant="elevated">Save</v-btn>
    </v-card-actions>
  </v-card>
</template>

如果需要不带阴影的常规按钮，也可以替换为variant="flat"，根据实际需求选择即可。

方式二：通过样式取消的默认行为 #

若不想给每个按钮单独设置属性，可添加自定义CSS覆盖<v-card-actions>对按钮的默认样式修改：

<template>
  <v-card>
    <v-card-title>MyCard</v-card-title>
    <v-card-text></v-card-text>
    <v-card-actions class="no-plain-buttons">
      <v-btn>Revert</v-btn>
      <v-spacer/>
      <v-btn>Cancel</v-btn>
      <v-btn>Save</v-btn>
    </v-card-actions>
  </v-card>
</template>

<style scoped>
.no-plain-buttons .v-btn {
  --v-btn-plain-opacity: 1;
  background-color: var(--v-theme-primary);
  color: var(--v-theme-on-primary);
  /* 可根据需求调整圆角、阴影等其他样式 */
}
</style>

第一种方式更贴合Vuetify组件的使用规范，推荐优先采用。

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