Vuetify remove dialog's box shadow - css

Question

I want to remove the box-shadow from the dialog box of vuetify. Image of that -->
In chrome devTools if I set box-shadow to none it works. Like the image below.
But when I am adding a class with box-shadow none, it ain't working. Code for that-->
<v-dialog
v-model="assignedPRPaneldialog"
width="700"
content-class="vDialog"
>
<v-card v-if="GET_PRESS_RELEASE_ASSIGNED_DATA.length > 0">
<!-- {{ GET_PRESS_RELEASE_ASSIGNED_DATA }} -->
<v-card
v-for="(item, i) in GET_PRESS_RELEASE_ASSIGNED_DATA"
:key="i"
class="pa-2"
outlined
>
<CardPr :simple="true" :item="item" />
</v-card>
</v-card>
<v-card v-else>
<v-alert border="bottom" colored-border type="warning" elevation="0">
No Press Release yet.
</v-alert>
</v-card>
</v-dialog>
<style lang="scss" scoped>
div.vDialog {
box-shadow: none;
}
</style>
What should I do here? Thanks in advance.

Answer 1

There are two easy ways I know of to remove box-shadow from v-dialog (and v-menu).
1. Globally:
<style>
.v-dialog {
box-shadow: none;
}
</style>
2. Specific v-dialog (better way):
<v-dialog content-class="elevation-0">
...
</v-dialog>
Notice that it has to be content-class instead of just class.
And if you want to hide the overlay, too:
<v-dialog content-class="elevation-0" hide-overlay>
...
</v-dialog>
References:
v-dialog API, Vuetify Elevation helpers

Answer 2

From this code it's visible that shadow is added on element with .v-dialog class, so you're adding "no-shadow" style to the wrong element.
.v-dialog {
border-radius: 6px;
margin: 24px;
overflow-y: auto;
pointer-events: auto;
transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
width: 100%;
z-index: inherit;
box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 9%), 0px 24px 38px 3px rgb(0 0 0 / 5%), 0px 9px 46px 8px rgb(0 0 0 / 3%);
You can add your class directly to <v-dialog> component, or use elevation-0 class.
EDIT:
If you want to remove dialog's overlay, use hide-overlay prop

Answer 3

Following m4n0's suggestion, found out any class that I use on v-dialog component was applying in the dialog inside v-application--wrap. But as you can see outside application--wrap, there is another v-dialog class is appearing. So currently I removed the scoped property from style, which is now giving me my desired output. Probably targeting the class should be a better option. I will try that out later.
I am not sure though if it is an intended behavior or I made a mistake somewhere.