Vue项目中Bootstrap nav-link样式无法覆盖的问题求助

问题场景 #

在Vue项目中尝试覆盖Bootstrap的.nav-link样式，已通过Chrome DevTools确认渲染后的HTML结构，且在组件的scoped样式中尝试了多种写法，但样式始终未生效。

渲染后的关键HTML结构 #

<div data-v-256a5f3d="" data-v-7bf4ea52="" class="row bg-gray-200 border-gray-300 d-flex justify-content-between align-items-center mx-1 mb-2 rounded tabs-list row-cols-2">
  <div data-v-256a5f3d="" data-v-7bf4ea52="" class="overflow-x-auto col-10">
    <div data-v-f029eeb6="" data-v-256a5f3d="" class="tabs col mt-2 d-flex flex-row" data-v-7bf4ea52="" id="__BVID__35">
      <div class="">
        <ul role="tablist" class="nav nav-tabs flex-nowrap hide-scrollbars  mb-0" id="__BVID__35__BV_tab_controls_">
          <li role="presentation" class="nav-item">
            <a role="tab" aria-selected="false" aria-setsize="15" aria-posinset="1" href="#" target="_self" class="nav-link" id="__BVID__36___BV_tab_button__" aria-controls="__BVID__36" tabindex="-1">
              <div data-v-256a5f3d="" class="overflow-x-auto__title d-flex flex-row custom-nav-link">
                Def...
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

对应Vue组件代码 #

<b-row
  v-if="showResultsTabs"
  cols="2"
  class="bg-gray-200 border-gray-300 d-flex justify-content-between align-items-center mx-1 mb-2 rounded tabs-list"
>
  <b-col cols="10" class="overflow-x-auto">
    <single-line-tabs class="d-flex flex-row">
      <b-tab
        v-for="(tab, index) in tabs"
        :key="tab.name"
        :active="isTabActive(tab, index)"
        :data-full-text="tab.label"
        @click="onTabClicked(tab, index)"
      >
        <template #title>
          <div
            class="overflow-x-auto__title d-flex flex-row custom-nav-link"
            @mouseover="onTabHovered(tab.label)"
            @mouseleave="onTabLeft"
          >
            {{ truncateTextInTab(tab.label, 3) }}
            <span v-if="tooltipText === tab.label" class="overflow-x-auto__tooltip">{{ tooltipText }}</span>
          </div>
        </template>
      </b-tab>
    </single-line-tabs>
  </b-col>
</b-row>

自定义single-line-tabs组件代码 #

<template>
  <b-tabs ref="tabs" class="col mt-2" :nav-class="`flex-nowrap hide-scrollbars mb-0`">
    <slot></slot>
  </b-tabs>
</template>

已尝试但无效的样式写法 #

1. 嵌套选择器写法：

<style lang="scss" scoped>
  ...some css
 
  .tabs .nav-tabs .nav-item .nav-link {
    border-top: 2px solid red !important;
  }
</style>

2. 直接选择.nav-link：

<style lang="scss" scoped>
  .nav-link {
    border-top: 2px solid red !important;
  }
</style>

3. 基础::v-deep写法：

<style lang="scss" scoped>
  ::v-deep {
    .nav-link  {
      border-top: 2px solid red !important;
    }
  }
</style>

解决方案 #

1. 结合精确选择器使用::v-deep（适配Vue 2） #

将::v-deep与多层选择器结合，确保样式能穿透到子组件内部的Bootstrap元素：

<style lang="scss" scoped>
  ::v-deep .tabs .nav-tabs .nav-item .nav-link {
    border-top: 2px solid red !important;
  }
</style>

如果是Vue 3项目，改用:deep()语法：

<style lang="scss" scoped>
  :deep(.tabs .nav-tabs .nav-item .nav-link) {
    border-top: 2px solid red !important;
  }
</style>

2. 提升选择器优先级 #

利用最外层自定义类增强选择器特异性，覆盖Bootstrap默认样式的优先级：

<style lang="scss" scoped>
  ::v-deep .tabs-list .nav-tabs .nav-item .nav-link {
    border-top: 2px solid red !important;
  }
</style>

3. 调整样式加载顺序 #

确保自定义样式在Bootstrap样式之后引入，让自定义样式能覆盖默认样式：

// main.js
import 'bootstrap/dist/css/bootstrap.css'
import './styles/custom.scss' // 自定义样式放在Bootstrap之后

4. 在single-line-tabs组件中直接添加样式 #

因为.nav-link是single-line-tabs内部b-tabs生成的元素，可直接在该组件中添加非scoped样式：

<template>
  <b-tabs ref="tabs" class="col mt-2" :nav-class="`flex-nowrap hide-scrollbars mb-0`">
    <slot></slot>
  </b-tabs>
</template>

<style lang="scss">
  .nav-tabs .nav-item .nav-link {
    border-top: 2px solid red !important;
  }
</style>

如果需要保持scoped，同样可以结合::v-deep/:deep()包裹选择器。

验证方法 #

修改样式后，打开Chrome DevTools的Elements面板找到.nav-link元素，查看Styles标签：

• 若自定义样式被划掉，说明优先级不足，需调整选择器
• 若样式未出现，检查是否有语法错误或加载顺序问题

内容的提问来源于stack exchange，提问作者Enrique GF