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

Question

我尝试使用 .modal-header 更改 b-modal -> in .modal-header 中的背景颜色bootstrap-vue。但是 vue 没有看到我的样式，我不知道为什么：/这里是代码。我按照链接中的答案

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/,>>>或::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>