Vuetify 主题被忽略答案

【问题标题】：Vuetify theme is being ignoredVuetify 主题被忽略
【发布时间】：2021-06-18 11:51:49
【问题描述】：

我在我的插件目录中创建了一个文件，如下所示：

import Vue from "vue";
import Vuetify from "vuetify/lib/framework";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#081d4d", // $blue
        secondary: "#00c8b7", // $jade
        //anchor: "#081d4d", // $blue (by default vuetify styles anchors with the same colour of primary)

        accent: "#82B1FF", // $blue
        error: "#ff4438", // $warm-red
        info: "#835dd0", // $violet
        success: "#4CAF50", // none
        warning: "#ff8204", // $orange
      },
    },
  },
});

然后我像这样在我的 main.ts 中使用它：

import "./registerServiceWorker";

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import { provide } from "@vue/composition-api";
import { DefaultApolloClient } from "@vue/apollo-composable";

import "./plugins/axios";
import vuetify from "./plugins/vuetify";
import apolloClient from "./plugins/vue-apollo";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  setup() {
    provide(DefaultApolloClient, apolloClient);
  },
  render: (h) => h(App),
}).$mount("#app");

当我使用按钮或警报并设置它们的颜色时，它没有使用我的主题。此外，即使我尝试更改为深色主题，也没有任何反应。这是模板：

<template>
  <div class="container-fluid d-flex align-items-center justify-content-center">
    <div class="row">
      <div class="col">
        <div class="section section-white">
          <h1>This is a test</h1>
          <p>With some tests content</p>

          <v-btn color="primary">Test</v-btn>
          <v-alert type="info"></v-alert>
        </div>
      </div>
    </div>
  </div>
</template>

这是我的用户界面的样子：

据我所知，我已经正确地遵循了指示，所以我不知道为什么这不起作用。

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

试着改变这个

import Vuetify from "vuetify/lib/framework";

到

import Vuetify from "vuetify/lib";

另外，如果你不能直接使用theme属性，可以这样使用。

<v-btn :color="$vuetify.theme.themes["light"].primary">Test</v-btn>

或者您也可以为此使用computed 属性

computedPrimaryColor(){
 return this.$vuetify.theme.themes["light"].primary;
}

并像使用它

<v-btn color="computedPrimaryColor">Test</v-btn>

【讨论】：

为什么会这样？我不能让它只使用主要而不是:color="$vuetify.theme.themes['light'].primary" 吗？