如何使用具有自定义主题变体的 vuetify 颜色道具
How to use vuetify color props with custom theme variations
我正在使用具有我们自己的自定义主题颜色的 vuetify (2.5.8)。如果我们需要更好地控制生成哪些变体并减少 css 变量，我们已经通过字符串或对象定义了我们自己的颜色名称。
但是，我无法让这些变体与 vuetify 元素的颜色道具一起使用，特别是 v-expansion-panel-header.
在文档中我看到了 color=”purple darken-2" 和 color="success darken-2" 的使用示例，用 space 分隔主题颜色及其变体。当我的主题中的颜色被定义为字符串并且它的变体由 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），但无济于事。有没有人有办法通过颜色道具传递这些变化，而不必使用 v-deep 选择器并在我使用它的任何地方重新设计整个组件的样式？或者我应该使用计算器进入 this.$vuetify.theme 并查看我是否可以通过这种方式获得十六进制代码？
提前致谢。
color="success muted"
仅使用 base 和 lighten/darken 变体。
您可以通过将其定义为 { success: '#1CC234', 'success-muted': '#2AAC9B' }
来解决此问题
In this case, color="success darken-2" no longer works.
主题配置中的键应该是驼峰式：darken2
我正在使用具有我们自己的自定义主题颜色的 vuetify (2.5.8)。如果我们需要更好地控制生成哪些变体并减少 css 变量，我们已经通过字符串或对象定义了我们自己的颜色名称。
但是，我无法让这些变体与 vuetify 元素的颜色道具一起使用，特别是 v-expansion-panel-header.
在文档中我看到了 color=”purple darken-2" 和 color="success darken-2" 的使用示例，用 space 分隔主题颜色及其变体。当我的主题中的颜色被定义为字符串并且它的变体由 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），但无济于事。有没有人有办法通过颜色道具传递这些变化，而不必使用 v-deep 选择器并在我使用它的任何地方重新设计整个组件的样式？或者我应该使用计算器进入 this.$vuetify.theme 并查看我是否可以通过这种方式获得十六进制代码？
提前致谢。
color="success muted"
仅使用 base 和 lighten/darken 变体。
您可以通过将其定义为 { success: '#1CC234', 'success-muted': '#2AAC9B' }
In this case,
color="success darken-2"no longer works.
主题配置中的键应该是驼峰式：darken2