CODEWITHSUNDEEP
cssvue.jsbootstrap-4bootstrap-vue
max
max

Reputation: 393

edit the online styles of a component in bootstrap-vue

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?

Upvotes: 0

Views: 1020

Answers (2)

Troy Morehouse
Troy Morehouse

Reputation: 5435

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

Upvotes: 0

David Japan
David Japan

Reputation: 242

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>

Upvotes: 1

Related Questions