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

【问题标题】：content-class on v-dialog not showing own stylingv-dialog 上的内容类不显示自己的样式
【发布时间】：2020-05-03 05:58:22
【问题描述】：

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

<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%;
}

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

【问题讨论】：

【解决方案1】：

如果您使用的是单文件组件（即App.vue 等），并且您在组件的样式标签中定义了foo CSS 类，则样式无法限定范围。

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

另一种方法是使用v-dialog 的attach 属性将对话框DOM 保留在组件内。您可以查看attach 道具here 的详细信息。

【讨论】：

【解决方案2】：

v-dialog 会从 DOM 中移除，因此我们需要创建一个全局 css 文件，因此每当在 DOM 中回调 v-dialog 时，就会应用这些样式。

1) 在public 下的assets 文件夹中创建一个css 文件global.css。

2) 在global.css 文件中定义您的样式：

   .v-dialog{
        border: 1px solid gold;
    }

3) 链接index.html中的文件，

<link re="stylesheet" href="assets//global.css"

这应该可以正常工作。

【讨论】：