Изменить цвет хлебных крошек bootstrap - vue - PullRequest
Новая
       1

Изменить цвет хлебных крошек bootstrap - vue

1 голос
/ 01 апреля 2020

Я хотел бы использовать bootstrap - vue панировочные сухари, но они, кажется, имеют встроенный фон и цвета текста. Я пробовал много комбинаций классов и стилей в тегах крошек и крошек, но безрезультатно. Следующее всегда создает синий или серый текст на светло-сером фоне. 

  <b-breadcrumb style="nothing works" :items="crumbs">
    <b-breadcrumb-item class="nothing works" v-for="(item, i) in crumbs" :key="i" :to="item.to">{{item.text}}</b-breadcrumb-item>
  </b-breadcrumb>

Я не знаю css слишком хорошо, но я подозреваю, что есть селектор, который знает, как достичь внутри сгенерированного html чтобы исправить стиль.

Ответы [ 2 ]

1 голос
/ 01 апреля 2020 
<style>
  .breadcrumb-item a {
    color: red
  }
</style>
<style lang="scss" scoped>
  /* scoped/module (s)css */
</style>

... будет работать, потому что цвета хлебных крошек применяются селектором a в Bootstrap 4.

Обратите внимание, что это возможно ' не быть ограниченным. По какой-то причине ::v-deep больше не работает. Если вы хотите использовать его только в этом компоненте, поместите класс в верхний элемент и добавьте префиксы для вашего класса к этому классу
(то есть: .my-component .breadcrumb-item a {...})

И нет, на уровне разметки вы ничего не сможете применить , поскольку <b-breadcrumb> - это просто заполнитель, который заменяется фактической bootstrap разметкой во время выполнения. И так же <b-breadcrumb-item>.

Примеры фактической bootstrap разметки крошки. По умолчанию в BootstrapVue это: 

ol.breadcrumb > li.breadcrumb-item > a

..., за исключением активного (последнего), который является 

ol.breadcrumb > li.breadcrumb-item.active > span

Full список доступных свойств элемента крошки в BootstrapVue.

0 голосов
/ 01 апреля 2020

Я бы попробовал использовать тег! Важный в конце вашего стиля: https://css-tricks.com/when-using-important-is-the-right-choice/

Другое дело, что вы можете попробовать стилизовать элемент напрямую 

b-breadcrumb-item {
  color: red;
}

Также это может быть связано с тем, что вы не загружаете свои стили при сборке приложения:

Вам потребуется реализовать загрузчик CSS:

https://vue-loader.vuejs.org/guide/extract-css.html

https://vue-loader.vuejs.org/guide/css-modules.html

Я разместил здесь несколько ссылок для дальнейшего чтения

...