vue更改dialog样式

<style>
.fullscreen{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.dialog-custom {
    width: 50%;
    height: 50%;
    border-radius: 5px;
    background: white;
}
</style>

<template>
  <v-dialog v-model="dialog" :fullscreen="fullscreen" :overlay="overlay"
           :overlay-color="overlayColor" :overlay-opacity="overlayOpacity"
           :dialog-class="'dialog-custom'">
    <v-card>
      <v-card-title>
        <span>{{ title }}</span>
      </v-card-title>
      <v-card-text>
        <span>{{ text }}</span>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary" text @click="dialog = false">Close</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import Vue from 'vue';

export default Vue.extend({
  name: 'my-dialog',
  props: {
    title: { type: String, default: '' },
    text: { type: String, default: '' },
  },
  components: {
    VDialog,
    VCard,
    VCardActions,
    VCardText,
    VCardTitle,
    VSpacer,
  },
  data: () => ({
    dialog: false,
    fullscreen: false,
    overlay: true,
  }),
  methods: {
    showDialog() {
      this.dialog = true;
    },
    closeDialog() {
      this.dialog = false;
    },
  },
});
</script>

<style scoped>

.my-dialog.v-dialog .v-card {
  width: 600px !important;
  height: 600px !important;
  border-radius: 10px;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  overflow: hidden;
}
.my-dialog.v-dialog .v-card__text {
  padding: 0px;
  overflow-y: scroll;
  max-height: calc(100% - 152px);
}
.my-dialog.v-dialog .v-card__title {
  background-color: #3f51b5;
  font-size: 24px !important;
  color: #ffffff;
  padding: 20px 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
</style>

<template>
  <div>
    <v-btn @click="showDialog">Open Dialog</v-btn>
    <my-dialog v-model="dialog" :title="'Hello World!'" :text="'Welcome to my custom dialog!'"></my-dialog>
  </div>
</template>