Css 动态覆盖 Vuetify 类

我有一个想要动态设置样式的Vutify对话框.问题是样式需要覆盖默认的v-dialog个样式.由于某些原因，在使用计算样式绑定时，css类中的变量，甚至直接输入样式，都不会对样式产生影响.如何动态覆盖Vutify组件上的默认样式？

下面是我的对话:

<template>
  <v-dialog 
    v-model="dialog" 
    max-width="350px"
    persistent
    hide-overlay
    style="{position: absolute; bottom: 0px;}"
  >        
  <div class="arrow-up mb-n1 ml-1"></div>
  <v-card>
    <v-container>
    <v-card-text>
    <v-row>
      <v-col 
        cols="12"
        align="start"
      >
        <p class="text-subtitle-1">
        Always best to start at the beginning, let's pull your products first.</p>
      </v-col>
    </v-row>
    </v-card-text>
      
      <v-card-actions class="mt-n8">
        <v-btn
          color="#68007d"
          text
          @click="goToImportMethod"
        >
          NEXT
        </v-btn>
        <v-btn
          color="#616161"
          text
          @click="closeEverything"
        >
          CLOSE
        </v-btn>
      </v-card-actions>
    </v-container>
  </v-card>
  </v-dialog>
</template>

我try 过使用这样的计算(computed)属性:

  <v-dialog 
    v-model="dialog" 
    max-width="350px"
    persistent
    hide-overlay
    :style="myStyle"
  >

有了这一点:

computed: {
  myStyle() {
    return {
      bottom: '0px',
      left: '150px',
      position: 'absolute'
    }
  }
},

然后，我try 在类本身中添加变量，如下所示:

>>> .v-dialog {
  box-shadow: none;
  overflow: visible;
  bottom: var(--bottom);
  left: 150px;
  position: absolute;
}

使用如下所示的简单数据属性:

data () {
  return {
    dialog: true,
    bottom: '0px',
  }
},

但归根结底，唯一有效的方法是静态覆盖类，这对我没有好处:

>>> .v-dialog {
  box-shadow: none;
  overflow: visible;
  bottom: 0px;
  left: 150px;
  position: absolute;
}