Dialog plugin (v1.0.0-beta.15), how do I style the dialog background? Used to work I think. Bug?

[Fancellu]

this.$q.dialog({
title: ‘Alert’,
message: ‘Are you sure you want to delete?’,
className: ‘bg-red text-white’,
cancel: true
}).onOk(() => {
console.log(‘OK’)
}).onCancel(() => {
console.log(‘Cancel’)
})

But the dialog is still white, and the background behind it is red. I’m sure this worked fine before is this a bug?

[Fancellu]

https://codepen.io/fancellu/pen/axZOqJ?editors=1010

[lucasfernog]

The className prop is applied on QDialog root, so you must create a CSS targeting your className and a child .q-dialog__inner > .q-card

e.g.

className: 'dialog-bg-red',

CSS:
.dialog-bg-red .q-dialog__inner > .q-card {
   background-color: #000;
}

[lucasfernog]

To use the same color as bg-red you have to import quasar variables into your style file

[Fancellu]

Thanks, got it to work with

.dialog-bg-red .q-dialog__inner > .q-card > * {
background-color: #FF0000;
color: #fff ;
}

Also to make the buttons white (blue looked nasty against red background)

ok: {
color: ‘text-white’,
flat: true
},
cancel: {
color: ‘text-white’,
flat: true
}