Vuetify 主题被忽略

Question

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

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>

这是我的 UI 的样子：

据我所知，我已正确按照说明进行操作，所以我不知道为什么这不起作用。

Answer 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>

Vuetify 主题被忽略

Vuetify theme is being ignored

vue.js

vuejs2

vuetify.js