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

【问题标题】：How to overwrite the vue-bootstrap styles in b-modal如何覆盖 b-modal 中的 vue-bootstrap 样式
【发布时间】：2020-07-15 08:10:23
【问题描述】：

我尝试使用bootstrap-vue 在 .modal-header 中更改 b-modal -> 中的背景颜色。但是 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;
}

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

【问题讨论】：

标签： css vue.js bootstrap-vue

【解决方案1】：

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

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

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

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

【讨论】：

哇！谢谢你。它;工作！我在这个案例上花了很多时间，完全没有关注 css 中的这个scope。比那个。
一年后，你我的朋友@Hiws 仍然是救世主！！！

【解决方案2】：

您可以在 vue 引导模式中使用 content-class="your-class"。

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

否则很难设置模态样式，因为普通 class="" 不适用于代码。

【讨论】：