How to overwrite the vue-bootstrap styles in b-modal

Question

I tried to change the background-color in b-modal -> in .modal-header using bootstrap-vue. But the vue doesn't see my styles and I don know why :/ here is the code. I follow by answer in link

HTML:

b-modal(id="card-1" title="CARTÃO DE CRÉDITO"  :modal-class="myclass" header-text-variant="light")

VUE

export default {
    data: {
   myclass: ['myclass']
 },

}

CSS

.myclass > .modal-dialog > .modal-content > .modal-header {
  background-color: #da2228 !important;
  color: white;
}

But I still doesn't see the results. Modal header is white. Any ideas why?

Answer 1

You're probably using a scoped style tag in your .vue file. If you are, then you need to use a deep-selector to properly target the subcomponent.

The selectors are /deep/, >>> or ::v-deep. In the below example i use /deep/, but the others should work for you as well.

You can also use the header-class prop on b-modal to directly add the class to the header if you wish.

<template>
  <b-modal header-class="my-class">
    <template #modal-header>Header</template>
    Hello
  </b-modal>

  <b-modal modal-class="my-second-class">
    <template #modal-header>Header</template>
    Hello
  </b-modal>
</template>

<style scoped>
/deep/ .my-class {
  background: black;
  color: white;
}

/deep/ .my-second-class > .modal-dialog > .modal-content > .modal-header {
  background: black;
  color: white;
}
</style>

Answer 2

You can use content-class="your-class" in the vue bootstrap modal.

<b-modal id="myModal" content-class="your-class" title="BootstrapVue">
    Body Content
</b-modal>

Or else it is difficult to style the modal cuz the normal class="" does not apply to the code.