如何在 Vuetify 的每个组件中应用特定颜色？

Question

我可以将某种颜色应用于项目中的整个组件吗？我的意思是，不要在每个标签上单独附加 class，例如：

<v-icon left>mdi-phone-in-talk</v-icon>
  <div class="pink darken-2 grey--text">tel</div>
</v-row>
<v-row align="center" class="mx-0 my-2">
  <v-icon left>mdi-location-enter</v-icon>
  <div class="pink darken-2 grey--text">loc</div>
</v-row>
<v-row align="center" class="mx-0 my-2">
  <v-icon left>mdi-discord</v-icon>
  <div class="pink darken-2 grey--text">name</div>
</v-row>
<v-row align="center" class="mx-0 my-2">
  <v-icon left>mdi-email</v-icon>
  <div class="pink darken-2 grey--text">mail</div>
</v-row>

// every div tag has "pink darken-2", seems quite WET

我想通过在特定范围的组件上应用某种颜色或在项目中的整个模板（例如主题）上应用某种颜色来实现此目标。有什么好的建议吗？

我知道我可以使用“主题配置”，但我不确定我是否可以应用自定义色调（如按钮的背景颜色）。

** 最佳：将某种颜色应用于项目中的整个组件，每个 classes 没有额外的代码 **

Answer 1

我只想创建一个可以在任何地方使用的新组件。

@/components/PinkGreyText.vue

<template>
  <div class="pink darken-2 grey--text">
    <slot />
  </div>
</template>

现在注册组件：https://vuejs.org/v2/guide/components-registration.html

现在您应该可以在任何地方使用它了，下面是您使用上面的自定义组件重写的原始代码段。

<v-row align="center" class="mx-0 my-2">
  <v-icon left>mdi-phone-in-talk</v-icon>
  <pink-grey-text>tel</pink-grey-text>
</v-row>

<v-row align="center" class="mx-0 my-2">
  <v-icon left>mdi-location-enter</v-icon>
  <pink-grey-text>loc</pink-grey-text>
</v-row>

<v-row align="center" class="mx-0 my-2">
  <v-icon left>mdi-discord</v-icon>
  <pink-grey-text>name</pink-grey-text>
</v-row>

<v-row align="center" class="mx-0 my-2">
  <v-icon left>mdi-email</v-icon>
  <pink-grey-text>mail</pink-grey-text>
</v-row>

如何在 Vuetify 的每个组件中应用特定颜色？

How can I apply certain color in every component in Vuetify?

vuetify.js