CODEWITHSUNDEEP
vuetify.js
JG_GJ
JG_GJ

Reputation: 785

How to add a class with new styles CSS to v-dialog?

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 vdialognew 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:

enter image description here

Upvotes: 23

Views: 20751

Answers (3)

mxmass
mxmass

Reputation: 436

Passing class to the v-dialog won't work, use content-class instead:

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

Have a look at the v-dialog docs

Upvotes: 42

Anthonius
Anthonius

Reputation: 340

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.

Upvotes: 5

Krishna Sibbala
Krishna Sibbala

Reputation: 1

you can add multiple names to class

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

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

Upvotes: -6

Related Questions