Vue-js-modal: Can't change background color

[Zyles]

<modal name="hello-world" :width="300" :height="350" :classes="modal"> asdf </modal>

<style>
.modal {
    background-color: #000;
  }
</style>

Still white background.

Please advise.

[Zyles]

Partly figured it out:

Looks like it needs to be "classes" not ":classes" and I used this:

.modal {
    background-color: #000;
    text-align: left;
    border-radius: 30px;
    box-shadow: 0 20px 60px -2px rgba(27,33,58,.4);
    padding: 0;
    display: block;
  }

It makes the borders round, however the background still remains white.

The problem is this code when rendered:

.v--modal-overlay .v--modal-box[data-v-40dd3b1e] {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #fff;
}

Removing the background-color in developer tools it makes it black. But I can't override it.

[Zyles]

Consider removing this line from the project source:

https://github.com/euvl/vue-js-modal/blob/master/src/Modal.vue#L392

It seems to have no effect on the white rendering, and I can override the background color.

If I have no specified class I will get a white modal (did not test in all browsers)

[euvl]

Hi @Zyles

Actually you were right, tiny change.
Please check out version [email protected]. It should not have white background.
Let me know if the issue is fixed.

Cheers 👍

[JStrebeyko]

Hi there!

Love the module, using it with my current project with ease. BUT! there's this .v--modal class that still has white background and seems stubborn with overwriting attempts. Any hints? Cheers! :beers:

[atourkow]

After banging my head around for hours I finally figured out how to overwrite the .vm--modal CSS.
It's actually VERY simple. Just add !important to the CSS (make sure the .modal-override class is global and not scoped)

<modal name="foo" classes="modal-override">...</modal>

.modal-override
    background #0008 !important
    border-radius 20px !important
    padding 10px