Im trying to override some styles from my app using bootstrap. When I access the Chrome Devtools, the HTML rendered is:
<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>
Which Eventually refers to this block of code in my app component in 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>
by the way the single-line-tabs is a component that has this format:
<template>
<b-tabs ref="tabs" class="col mt-2" :nav-class="`flex-nowrap hide-scrollbars mb-0`">
<slot></slot>
</b-tabs>
</template>
Then on my css scoped file in the vue component was like this:
<style lang="scss" scoped>
...some css
.tabs .nav-tabs .nav-item .nav-link {
border-top: 2px solid red !important;
}. ===============>HERE TRYING TO MODIFY THE COMPONENT ACCESSING THE BOOTSTRAP STYLE CLASS
</style>
but is not working... also have tried:
.nav-link {
border-top: 2px solid red !important;
}
or
::v-deep {
.nav-link {
border-top: 2px solid red !important;
}
}
but the component keeps the same
Guess the right approach would be this one:
::v-deep(.nav-link) {
border-top: 2px solid red !important;
}