在 bootstrap-vue 中编辑组件的在线样式答案

【问题标题】：edit the online styles of a component in bootstrap-vue在 bootstrap-vue 中编辑组件的在线样式
【发布时间】：2020-03-26 15:26:49
【问题描述】：

我正在使用 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>

但这不起作用，那么编辑这些样式的正确方法是什么？

【问题讨论】：

你试过把重要的放在一边吗？
使用浏览器的开发工具检查您的样式未应用的原因。使用 CSS，通常是由于特殊性。即，Bootstrap CSS 选择比你的更具体

标签： css vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

是的，您需要在 css 选择器范围内添加您的 root element id ...

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>

【讨论】：

【解决方案2】：

作用域样式仅适用于子组件的根元素：https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

使用作用域样式时，使用Vue Loader deep selector 定位子组件的内部元素：

   <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 classdropdown-item`。

【讨论】：