最新更新后，如何向 vuetify 中的 v-dialog 添加自定义样式？

Question

我正在使用 vuetify，我需要向 v-dialog 添加自定义 class。我已经搜索过有关它的信息，但我的问题是道具 "content-class" 已从 vuetify 中删除。那我该怎么办？还有别的办法吗？

<v-dialog v-model="loginUserDialog" content-class="loginmodalbox" max-width="600px" persistent>
</v-dialog>

.loginmodalbox .modal-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 8px;
 }

Answer 1

道具 content-class 仍然可用：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      dialog: false,
    }
  },
})

.loginmodalbox .v-card__title {
  background: red!important;
  color: white!important;
}

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.5.8/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.8/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-dialog v-model="dialog" width="500" content-class="loginmodalbox">
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            color="red lighten-2"
            dark
            v-bind="attrs"
            v-on="on"
          >
            Click Me
          </v-btn>
        </template>

        <v-card>
          <v-card-title>
            Privacy Policy
          </v-card-title>

          <v-card-text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </v-card-text>

          <v-divider></v-divider>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" text @click="dialog = false">
              I accept
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </v-app>
</div>

最新更新后，如何向 vuetify 中的 v-dialog 添加自定义样式？

How can I add a custom style to an v-dialog in vuetify after the latest update?

css

sass

vue.js

vuetify.js