如何将具有新样式css的类添加到v-dialog，vuetify？答案

【问题标题】：How to add a class with new styles css to v-dialog, vuetify?如何将具有新样式css的类添加到v-dialog，vuetify？
【发布时间】：2019-02-16 05:05:57
【问题描述】：

美好的一天。我正在使用 vuetify，在组件中使用以下 v-dialog：

<template>
  <div>
    <!--Indicador-->
      <v-dialog class="vdialognew" v-model="mostrarIndicator" persistent>
        <v-content>
          <v-container fluid fill-height>
            <v-layout align-center justify-center>
                <cube-shadow class="spinnerRotate"></cube-shadow>
            </v-layout>
          </v-container>
        </v-content>
      </v-dialog>
    <!-------------->
  </div>
</template>
<style scoped>
.vdialognew {
  box-shadow: none !important;
  max-width: 610px !important;
}
</style>

正如您将在 v-dialog 中看到的，我添加了 vdialognew 类来应用这些新样式，但是当通过在浏览器控制台中检查加载内容时，我发现 vdialognew 类仅适用于它。同样，如果我在 v-dialog 标记中使用 style 属性，它对我不起作用。我怎样才能做出这样的改变？

我正在做这个修改以消除绿色方块后面看到的框：

提前非常感谢您。祝福

【问题讨论】：

标签： vuetify.js

【解决方案1】：

将“class”传递给 v-dialog不起作用。

请改用“content-class”。你的情况

<v-dialog content-class="vdialognew" v-model="mostrarIndicator" persistent>

应该可以。

看看v-dialog docs

【讨论】：

刚刚在开发模式下检查 - 工作正常。你能展示你的代码吗？
有没有人发现每次你打开一个对话框时它都会在 dom 上创建一个新的对话框并且不会删除以前的版本？

【解决方案2】：

使用“content-class”是@mxmass 提到的正确答案，但如果您尝试在范围级别添加类，它将不起作用。

在开头添加样式，假设您使用 nuxt，创建一个主样式文件，例如 main.scss，然后在 nuxt.config.js 中，将该文件添加到 css 部分。这样，您的样式类在您使用“内容类”时可用。希望这会有所帮助。

【讨论】：

我在同一条船上，想知道为什么我的班级风格被忽略了。谢谢。

【解决方案3】：

您可以为类添加多个名称

<v-dialog class="vdialognew dialogCss"></v-dialog>

<style>
.dialogCss {
background: #8e5ba6;
}
</style>

【讨论】：

更改不适用，这是我的不便。