如何在b-mode中覆盖vue引导程序样式

Question

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

您可能在.vue文件中使用了scoped样式的标记。如果是，则需要使用深度选择器来正确定位子组件。

选择器是/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>

Answer 2

您可以使用content class="你的班级。

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

否则很难将模态设置为标准的class＝"">不适用于代码。