时间戳

首页 > 解决方案 > 如何使用带有自定义主题变体的 vuetify 颜色道具

vue.js - 如何使用带有自定义主题变体的 vuetify 颜色道具

问题描述

我正在使用带有我们自己的自定义主题颜色的 vuetify (2.5.8)。如果我们需要更多地控制生成哪些变化并减少 css 变量，我们已经通过 String 或 Object 定义了我们自己的颜色名称。但是，我无法让这些变体与 vuetify 元素的颜色属性一起使用，特别是v-expansion-panel-header.

在文档中，我看到了使用color=”purple darken-2"and的示例color="success darken-2"，用空格分隔主题颜色及其变化。当我的主题中的颜色被定义为字符串并且其变体由 vuetify 生成为 (darken|lighten)-{n} 时，此方法有效。

但是当我定义自己的变体时，这不再起作用了。例如：如果我success: { base: '#1CC234', muted: '#2AAC9B', }'在我的主题中定义了颜色，我不能使用color="success muted"，它将始终显示基色。当我尝试以 vuetify 描述它们的方式命名我的变体时也是如此，例如success: { base: '#1CC234', 'darken-2': '#2AAC9B', }'. 在这种情况下，color="success darken-2"不再起作用。

我已经尝试通过将我的变体命名为“darken-2”等以及嵌套语法 ( success.muted) 作为生成的颜色变量 ( success-muted) 的名称来解决它，但无济于事。有没有人可以通过 color 属性传递这些变化，而不必使用 v-deep 选择器并在我使用它的任何地方重新设置整个组件的样式？或者我应该使用计算来this.$vuetify.theme查看是否可以通过这种方式获取十六进制代码？

提前致谢。

标签： vue.jsvuejs2vuetify.js

解决方案

color="success muted"

仅使用base和lighten/darken变体。
您可以通过将其定义为来解决此问题{ success: '#1CC234', 'success-muted': '#2AAC9B' }

在这种情况下，color="success darken-2"不再起作用。

主题配置中的key应该是camelCase：darken2

推荐阅读