在vue3中修改vuetify主题时出错

Question

我有一个错误，或者你可以称之为我想更改 vuetify 主题的主要和次要颜色，我在 vuetify.js 文件中执行此操作，如下所示。

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Composables
import { createVuetify } from 'vuetify'

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
  defaults: {
    theme: {
      themes: {
        light: {
          colors: {
            primary: '#1B3055',
            secondary: '#4984A1',
          },
        },
      },
    },
    VBtn: {
      class: 'text-none',
    },
}
})

但是按钮上的颜色与发布的颜色不同

<v-btn :height="56" color="primary" variant="flat" class="mt-5 text-none"
:loading="loaderSession" @click="signIn()" block>
Iniciar Sesion
</v-btn>

我不明白为什么这个错误发生在我身上。我已经有几个使用 vue 和 vuetify 的项目，但在这种情况下我遇到了这个错误，如果我已经验证了主题，那么它就在光中。版本是“vue”：“^ 3.3.0”，“vuetify”：“^ 3.4.0”。

谢谢

用 vuetify 解决我的问题

Answer 1

您应该将

theme

移出

defaults

:

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Composables
import { createVuetify } from 'vuetify'

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#1B3055',
          secondary: '#4984A1',
        },
      },
    },
  },
  defaults: {
    VBtn: {
      class: 'text-none',
    },
}
})