Как переписать стили vue - bootstrap в b-modal - PullRequest
Новая
       3

Как переписать стили vue - bootstrap в b-modal

2 голосов
/ 03 апреля 2020

Я попытался изменить цвет фона в b-modal -> в .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;
}

Но я все еще не вижу результатов. Модальный заголовок белый. Есть идеи почему?

1 Ответ

3 голосов
/ 03 апреля 2020

Возможно, вы используете тег стиля scoped в файле .vue. Если да, то вам нужно использовать глубокий селектор , чтобы правильно нацелить субкомпонент.

Селекторы: /deep/, >>> или ::v-deep. В приведенном ниже примере я использую /deep/, но остальные также должны работать для вас.

Вы также можете использовать опору header-class на b-modal, чтобы напрямую добавить класс в заголовок, если вы sh. 

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