css - 如何覆盖 b-modal 中的 vue-bootstrap 样式

Question

我尝试使用 bootstrap-vue 更改 b-modal -> in .modal-header 中的背景颜色.但是 vue 没有看到我的样式，我不知道为什么:/
这是代码。我按照 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;
}

但我仍然没有看到结果。模态标题为白色。任何想法为什么？

Answer 1

您可能正在使用 scoped您的 .vue 中的样式标签文件。
如果是，则需要使用 deep-selector正确定位子组件。

选择器是 /deep/ , >>>或 ::v-deep .
在下面的例子中，我使用 /deep/ ，但其他人也应该为你工作。

您也可以使用 header-class支持 b-modal如果您愿意，可以直接将类添加到标题中。

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