Css Vuetify主题不与自定义主题一起使用

我正在尝试调整Vuetify的主题颜色，但我的更改未注册。我看过其他几篇文章，并复制了它们的代码，但无法使其正常工作。该颜色仍然是默认的Vuetify主颜色。次颜色也不会改变

我尝试过的事情：

• 包装应用程序
• Vue.use的各种配置

vuetify.js

Stepper.vue

接受服务条款
查看成员资格选项
付款（可选）
确认书
导入“./assets/css/main.css”；
导出默认值{
名称：“步进机”，
数据（）{
返回{
e1:1，
};
},
};
#步进机{
保证金：自动；
边际上限：8vh；
宽度：62.5%；
高度：80vh；
边界半径：20px；
}
.步进式割台{
盒影：无！重要；
填充：0.10%0.10%；
字体系列：Roboto；
字体大小：11px；
字体风格：普通；
字体大小：400；
线高：17px；
字母间距：1px；
文本对齐：居中；
空白：nowrap；
}

App.vue

从“/components/Stepper”导入步进器；
导出默认值{
名称：“应用程序”，
组成部分：{
步进机，
},
数据：（）=>({
//
}),
};

如果您使用的是Vuetify 2，您可以使用这种方式

export default new Vuetify({
  iconfont: 'mdi',
  //my custom colors
  theme: {
    dark: false, // here we need to set theme
    themes: {
      /*
      ? comments structure [light] - [dark]
      */
      light: {
        custm_theme_1: '#ffffff', // white - black
        custm_theme_2: '#F75E60', // pink - black
        custm_theme_3: '#000000', // black - white
        custm_theme_4: '#ffffff', // white - white       
      } ,
      dark: {
        /*
          ? comments structure [light] - [dark]
        */
        custm_theme_1: '#000000', // white - black
        custm_theme_2: '#000000',// pink - black
        custm_theme_3: '#ffffff', // black - white
        custm_theme_4: '#ffffff', // white - white
     
      }
    },
    options: {
      customProperties: true,
      // themeCache
    },
  }
});

以及使用方法（在任何vuetify上）

html（vue） 一,

二,

三,

四,

css

<template>
  <div>
    <v-stepper alt-labels id="stepper">
      <v-stepper-header class="stepper-header">
        <v-stepper-step step="1" color="secondary">
          Accept Terms of Service
        </v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="2">
          View Membership Options
        </v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="3">
          Payment (optional)
        </v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="4">
          Confirmation
        </v-stepper-step>
      </v-stepper-header>
    </v-stepper>
  </div>
</template>

<script>
import "../assets/css/main.css";
export default {
  name: "Stepper",
  data() {
    return {
      e1: 1,
    };
  },
};
</script>

<style scoped>
#stepper {
  margin: auto;
  margin-top: 8vh;
  width: 62.5%;
  height: 80vh;
  border-radius: 20px;
}
.stepper-header {
  box-shadow: none !important;
  padding: 0 10% 0 10%;
  font-family: Roboto;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
}
</style>

<template>
  <v-app>
    <v-main> <Stepper /> </v-main>
  </v-app>
</template>

<script>
import Stepper from "./components/Stepper";
export default {
  name: "App",
  components: {
    Stepper,
  },
  data: () => ({
    //
  }),
};
</script>

export default new Vuetify({
  iconfont: 'mdi',
  //my custom colors
  theme: {
    dark: false, // here we need to set theme
    themes: {
      /*
      ? comments structure [light] - [dark]
      */
      light: {
        custm_theme_1: '#ffffff', // white - black
        custm_theme_2: '#F75E60', // pink - black
        custm_theme_3: '#000000', // black - white
        custm_theme_4: '#ffffff', // white - white       
      } ,
      dark: {
        /*
          ? comments structure [light] - [dark]
        */
        custm_theme_1: '#000000', // white - black
        custm_theme_2: '#000000',// pink - black
        custm_theme_3: '#ffffff', // black - white
        custm_theme_4: '#ffffff', // white - white
     
      }
    },
    options: {
      customProperties: true,
      // themeCache
    },
  }
});

 class="custm_theme_2--text"

 class="custm_theme_2"

 style="color: var(--v-custm_theme_2-base) !important"

 color="custm_theme_2"
 text-color="white" # or custm_theme_2
 background-color="amber lighten-4"

color: var(--v-custm_theme_2-base) !important;