如何在 Vuetify 中使用变亮或变暗的颜色作为 v-btn 的背景？

Question

我在 vuetify 上有一个这样的按钮：

<v-btn color="blue" icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

结果是这样的：

现在我尝试这样做：

<v-btn class="blue lighten-4" icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

但结果是这样的：

虽然我只期待颜色变浅。

我怎样才能实现我的目标？注意这里使用的是vuejs 2

Answer 1

我通过写这个解决了它：

<v-btn color="blue--text text--lighten-4" icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

这是因为图标被视为文本而不是背景

编辑：

正如@Adam Muse 指出的那样，更好的解决方案是在 <v-icon> 标签上添加 class：

<v-btn icon>
  <v-icon color="blue lighten-4">mdi-pencil</v-icon>
</v-btn>

Answer 2

为您的 v-icon

添加颜色

<v-icon color="blue lighten4">

我会避免 in-line 将它与 blue--text

您还可以使用 class="blue--text" 作为文本

How to use lighten or darken colors as background of a v-btn in Vuetify?