如何在Vuetify自定义主题变体场景中正确使用组件color属性

问题核心原因 #

Vuetify 2.x 版本组件的color属性内置的「空格分隔色名+变体」语法，仅支持框架自动生成的darken-{n}/lighten-{n}/accent-{n}这类标准变体，你自己定义的非标准变体名（比如muted）、甚至是你手动覆写的darken-2这类标准变体名，都不会被内置的解析逻辑识别，默认只会取对应色的base值。

可行解决方法 #

不需要写v-deep覆盖样式，两种常用方案都可以实现需求：

• 直接传入提取到的自定义变体色值
  你可以直接从$vuetify.theme中取对应变体的十六进制色值传给color属性，适配明暗主题的写法如下：

  <!-- 直接写在模板里 -->
  <v-expansion-panel-header :color="$vuetify.theme.currentTheme.success.muted">
    内容
  </v-expansion-panel-header>
  

  如果多个地方用到可以封装成计算属性复用：

  computed: {
    getCustomColor() {
      return (colorName, variant) => {
        return this.$vuetify.theme.currentTheme[colorName][variant]
      }
    }
  }
  

  调用时直接用:color="getCustomColor('success', 'muted')"即可。
• 全局注册自定义颜色解析工具
  如果你想简化调用，可以在Vue原型上挂载一个全局方法，专门用来解析自定义主题色的变体，所有组件都可以直接调用，不用重复写计算属性。

注意事项 #

Vuetify组件的color属性本身支持直接传入十六进制色值，只要正确把自定义变体的色值传入，所有支持color属性的组件都可以正常生效，不需要额外覆写样式。

内容的提问来源于stack exchange，提问作者Excalibaard