如何在v-dialog，vuetify中添加具有新样式CSS的类？

Question

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

<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属性，则它对我不起作用。我该如何进行更改？

我正在做此修改，以消除绿色方块后面的框：

非常感谢您。祝福

Answer 1

将“类”传递给v对话将不起作用。

改为使用“内容类”。就您而言

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

应该工作。

看看v-dialog docs

Answer 2

如@mxmass所述，使用“ content-class”是正确的答案，但是如果您尝试在作用域级别添加该类，则将无法使用。

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

Answer 3

您可以为课程添加多个名称

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

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