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

Question

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

在文档中，我看到了使用 color=”purple darken-2" 和 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，看看我是否可以通过这种方式获取十六进制代码？

提前致谢。

Answer 1

color="success muted"

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

来解决此问题

在这种情况下，color="success darken-2" 不再有效。

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