edit the online styles of a component in bootstrap-vue

Question

I am working with bootstrap-vue to make a navigation menu, something like this: (taken directly from the documentation)

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

this time I would like to change a bit the styles that this component already has, in this case the background color when passing the cursor from the drop-down list of the menu, for which I have something like this:

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

But this does not work, so what is the correct way to edit these styles?

Use your browser's dev tools to check why your styles aren't being applied. With CSS, it's typically due to specificity. Ie, the Bootstrap CSS selections are more specific than yours — Phil, Dec 02 '19 at 02:23

score 1 · Answer 1 · answered Dec 02 '19 at 02:27

Yes you need to add your root element id in css selector scope ...

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>

score 0 · Answer 2 · answered Dec 03 '19 at 15:15

Scoped styles only apply to the root element of the child component: https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

Use the Vue Loader deep selector to target inner elements of a child component when using scoped styles:

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

Note that dropdown items render a root <li> element, and the <a> (or <button>) element is a child of the <li>. The child element (not the root <li>) has the classdropdown-item`.

edit the online styles of a component in bootstrap-vue

2 Answers2