在Vuetify主题自定义中使用嵌套变量

问题描述

我想使用变量--v-primary-link，--v-primary-text和--v-primary-disabled。但是Vuetify仅生成--v-primary-base，是否可以使用下面编写的代码生成？还是有其他方法可以做到这一点？

来自@ plugins / vuetify.js的代码

light: {
  primary: {
    base: '#ffc844',text: '#303030',link: '#FFA844',disabled: '#AAAAAA',},}

预期输出：它还应生成变量--v-primary-link，--v-primary-text和--v-primary-disabled

解决方法

根据Vuetify的有关customProperty主题化here的文档，可以覆盖的变量数量有限

{
  base: string
  lighten5: string
  lighten4: string
  lighten3: string
  lighten2: string
  lighten1: string
  darken1: string
  darken2: string
  darken3: string
  darken4: string
}

但是您可以创建自己的自定义版本

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: {
          base: '#ffc844',text: '#303030',link: '#FFA844',disabled: '#AAAAAA',},options: {
      customProperties: true,})

根据vuetify的doc

，在您的CSS中使用它

<style scoped>
  .link {
    color: var(--v-primary-link);
  }
</style>