不能将命名空间 'ThemeDefinition' 用作 Vuetify 中的类型

Question

我想为 Vuetify v3.0.0-alpha.10 创建自定义主题这是我的 vuetify.ts 插件文件

import "@mdi/font/css/materialdesignicons.css";
import "vuetify/lib/styles/main.sass";
import { createVuetify, ThemeDefinition } from "vuetify";
import * as components from "vuetify/lib/components";
import * as directives from "vuetify/lib/directives";

const defaultLightTheme: ThemeDefinition = {
  dark: false,
  colors: {
    background: "#FFFFFF",
    surface: "#FFFFFF",
    primary: "#6200EE",
    "primary-darken-1": "#3700B3",
    secondary: "#03DAC6",
    "secondary-darken-1": "#018786",
    error: "#B00020",
    info: "#2196F3",
    success: "#4CAF50",
    warning: "#FB8C00",
  },
};

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: "defaultLightTheme",
    themes: {
      defaultLightTheme,
    },
  },
});

但是我得到这个错误： Cannot use namespace 'ThemeDefinition' as a type

我复制了 Vuetify 文档的例子： Vuetify docs

有解决这个问题的办法吗？感谢和问候

Answer 1

有类似问题我最终做了以下事情：

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme: {
        dark: false,
        colors: {
          background: '#FFFFFF'
          // more colors
        },
        variables: {} //ADD AN EMPTY OBJECT
     }
   }
  }
})

请注意 variables 字段 - 当前为 a known bug in Vuetify 3

不能将命名空间 'ThemeDefinition' 用作 Vuetify 中的类型

Cannot use namespace 'ThemeDefinition' as a type in Vuetify

javascript

typescript

vue.js

vuetify.js