Answer a question

I have a simple dialog with a content-class.

<v-dialog content-class="foo" v-model="showDialogForProduct">

If I make some styling or wants to change som default dialog styling it's not showing. In my css i have:

.foo {
  border-radius: 30px;
}

Or if I want's to change some existing dialog css:

.foo .v-dialog{
  margin: 0px;
}

.foo .v-dialog:not(.v-dialog--fullscreen) {
  max-height: 100%;
}

Is there a way to change the styling or is there something wrong with the content-class?

Answers

If you are using single-file components (i.e. App.vue, etc), and you define your foo CSS class in the style tag of the component, the styles cannot be scoped.

This is because the dialog is removed from the component's DOM and inserted just under the v-app component at the top-level of the application. If you need to style a dialog, declare the CSS classes in a global style sheet or in a component's non-scoped <style> tag.

An alternative is to use v-dialog's attach prop to keep the dialog DOM inside the component. You can see details of the attach prop here.