How to add a class with new styles css to v-dialog, vuetify? - vuetify.js

Question

Good day. I am working with vuetify, using the following v-dialog in a component:
<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>
As you will see in v-dialog I have added the vdialognew class, to apply those new styles, but when loading the content by checking in the browser console, I see that the vdialognew class does not apply to it, only. Similarly, if I use the style property inside the v-dialog tag, it does not work for me. How can I make such a change?
I am doing this modification to eliminate the box that is seen behind the green square:
Thank you very much in advance. Blessings

Answer 1

Passing "class" to the v-dialog won't work.
Use "content-class" instead. In your case
<v-dialog content-class="vdialognew" v-model="mostrarIndicator" persistent>
should work.
Have a look at the v-dialog docs

Answer 2

Use "content-class" is the correct answer as mentioned by #mxmass, but if you're trying to add the class in scoped level, it won't work.
Add the style in the beginning, so let's say if you're using nuxt, create a main styling file such as main.scss, then in nuxt.config.js, add that file in css section. That way, your styling class is available when you're using "content-class". Hope this helps.

Answer 3

you can add multiple names to class
<v-dialog class="vdialognew dialogCss"></v-dialog>
<style>
.dialogCss {
background: #8e5ba6;
}
</style>