Vue.js Vue 3 Vuetify 3：如何为按钮设置全局默认 colored颜色

发布于12月16日

使用Vue 3和Vuetify 3.0.4，我正在寻找一种方法来为Vutify的v-btn's设置全局默认 colored颜色 .

但是当我想在特定的v-btn上设置不同的 colored颜色时，这个 colored颜色必须是可编辑的.

在Vuetify 2上，按钮的默认 colored颜色为灰色，如下例所示-

<v-btn
  icon
  tile
>
  <v-icon>mdi-trash-can-outline</v-icon>
</v-btn>

现在是Vuetify 3岁了，我总是要写color="grey":

<v-btn
  @click="deleteAccountDialog(item)"
  variant="text"
  color="grey"
  icon="mdi-delete"
/>

EDIT:个我添加了vutify.ts内容以显示主题设置:

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import type { ThemeDefinition } from 'vuetify'

const MyTheme: ThemeDefinition = {
  dark: false,
  colors: {
    primary: '#2196F3',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107',
  },
}

export default createVuetify({
  theme: {
    defaultTheme: 'MyTheme',
    themes: {
      MyTheme,
    },
  },
})

Vue.js Vue 3 Vuetify 3：如何为按钮设置全局默认 colored颜色

推荐答案

Vue.js相关问答推荐

Vue3：如何在功能组件中重用插槽vnode

在VITE-VUE APP-DEV模式上重定向HTTP请求

Vue 3组合式API如何测试是否发出正确的事件

vue ：多个样式的类绑定在一个

如何使用 Vite 从公共目录导入 JSON 文件？

我如何使用 vuejs 在我的 url 中编码一个令牌

Vue：根元素内容和内容分发槽

动态插入字符串上的 Vue 事件处理程序不起作用

Vuetify 容器不会填充高度

全局方法和实例方法有什么区别？

错误：您可能需要额外的加载器来处理这些加载器的结果.

Vue&TypeScript：在项目目录外的 TypeScript 组件中实现导入时如何避免错误 TS2345？

在组件外使用 VueI18n 的问题

Vuejs模板继承

如何在 Vue 中动态创建组件上获取更新的 $refs？

如何从 vue-apollo 中访问 this.$route？

vuex - 即使不推荐，是否可以直接更改状态？

组件已注册但未使用 vue/no-unused-components

如何在 vuejs 中的基于类的组件中编写计算设置器

理解 Vue 中的this关键字