我一直在嘗試更改彈出框主體的背景顏色，但它并沒有改變顏色。如果我從樣式中洗掉范圍，那么它可以作業，但是當我使用范圍并使用深度選擇器時，顏色不適用。
這是我的代碼
<template>
<div>
<button
:id="callToAction"
>click me
</button>
<b-popover
:target="callToAction"
triggers="click blur"
custom-
>
<div>Edit Me</div>
</b-popover>
</div>
</template>
<style scoped>
*>>>.my-popover-class {
background: black !important;
color: white !important;
}
*>>>.my-popover-class .popover-body {
color: white !important;
background: black !important;
}
</style>
uj5u.com熱心網友回復：
我對這個問題很熟悉，因為我幾乎所有的專案都使用 Bootstrap-vue。如果我必須覆寫任何引導組件，我只需從樣式中洗掉范圍。如果您需要使用作用域并且還想覆寫引導組件，那么您應該選擇它的包裝器選擇器并嵌套它。
uj5u.com熱心網友回復：
對于第一個選擇器，您不需要深度選擇器，因為該類已添加到具有標簽data-v-****屬性的彈出框的根元素中。scoped
第二個你需要一個，但你需要把它放在.my-popover-class. 這樣，您的選擇器將呈現為.my-popover-class[data-v-****] .popover-body，這應該可以作業。
<style scoped>
.my-popover-class {
background: black !important;
color: white !important;
}
.my-popover-class >>> .popover-body {
color: white !important;
background: black !important;
}
</style>
代碼沙盒示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/417282.html
標籤：