редактировать онлайн-стили компонента в bootstrap-vue - PullRequest
Новая
       95

редактировать онлайн-стили компонента в bootstrap-vue

0 голосов
/ 02 декабря 2019

Я работаю с bootstrap-vue для создания меню навигации, что-то вроде этого: (взято непосредственно из документации) 

  <b-navbar toggleable="lg" type="light" variant="light">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template v-slot:button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>

на этот раз я хотел бы изменитьБит стилей, которые этот компонент уже имеет, в этом случае цвет фона при прохождении курсора из выпадающего списка меню, для которого у меня есть что-то вроде этого: 

   <style scoped> 
     .dropdown-item:hover, .dropdown-item:focus {
        color: #ffffff;
        text-decoration: none;
        background-color: #dd4343;
      }
   </style>

Но это не такработать, так как правильно редактировать эти стили?

Ответы [ 2 ]

1 голос
/ 02 декабря 2019

Да, вам нужно добавить root element id в область выбора css ... 

new Vue({
  el: "#app",
  
  });
#app .dropdown-item:hover,#app .dropdown-item:focus {
        color: #ffffff;
        text-decoration: none;
        background-color: #dd4343;
      }
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
<b-navbar toggleable="lg" type="light" variant="light">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template v-slot:button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
  </div>
0 голосов
/ 03 декабря 2019

Стили Scoped применяются только к корневому элементу дочернего компонента: https://vue -loader.vuejs.org / guide / scoped-css.html # child-component-root-elements

Используйте глубокий селектор Vue Loader для нацеливания на внутренние элементы дочернего компонента при использовании стилей области действия: 

   <style scoped> 
     /deep/ .dropdown-item:hover,
     /deep/ .dropdown-item:focus {
        color: #ffffff;
        text-decoration: none;
        background-color: #dd4343;
      }
   </style

Обратите внимание, что выпадающие элементы отображают кореньЭлемент <li>, а элемент <a> (или <button>) является дочерним по отношению к <li>. Дочерний элемент (не корневой <li>) has the class dropdown-item`.

...