v-dialog 上的内容类不显示自己的样式

Question

我有一个带有内容类的简单对话框。

<v-dialog content-class="foo" v-model="showDialogForProduct">

如果我做了一些样式或想要更改一些默认对话框样式，它不会显示。在我的 CSS 中我有：

.foo {
  border-radius: 30px;
}

或者，如果我想更改一些现有的对话框 CSS：

.foo .v-dialog{
  margin: 0px;
}

.foo .v-dialog:not(.v-dialog--fullscreen) {
  max-height: 100%;
}

有没有办法改变样式或者内容类有问题？

Answer 1

如果您使用单文件组件（即等），并且在组件的样式标记中App.vue定义CSS 类，则样式无法确定作用域。foo

这是因为对话框已从组件的 DOM 中删除，并插入到v-app应用程序顶层的组件下方。如果需要设置对话框的样式，请在全局样式表或组件的非作用域<style>标记中声明 CSS 类。

另一种方法是使用v-dialogs attachprop 将对话框 DOM 保留在组件内。您可以在此处查看该attach道具的详细信息。