Currently, I am in the process of updating my website to simplify color palette swapping. We are still experimenting with different colors that work well together. Our stack includes Vue and Vuetify, with SCSS generating our primary CSS file. Most of our components are built using Vue SFCs. However, I have encountered a puzzling problem with a V-Tab, where the color of the "active" bar underneath refuses to change.
The main challenge lies in the fact that when working with Vuetify components, inline CSS has minimal impact. Passing color="#ffffff" as a prop functions perfectly, everything looks good. Unfortunately, I have been unable to achieve the same results using CSS (the generated code places the bar in a separate div element outside of the tab).
- I have attempted various methods to override the style of the
v-tabs-slider-wrapperelement - I have experimented with utilizing SCSS functions within the
computedsection of the SFC - I have tried conventional CSS and SCSS approaches
- I have explored binding the
colorattribute with a computed function referencing the SCSS function - I have tested using classes, ids, and names
- I even tried using
background-colorin numerous ways
If anyone can offer assistance or guidance, it would be greatly appreciated.
<template>
<v-tabs class="tabs">
<v-tab>Thing</v-tab>
<v-tab-item>Inner Thing</v-tab-item>
</v-tabs>
</template>
<script>
export default { };
</script>
<style lang="scss" scoped>
@import "../styles/main.scss";
.tabs div {// this was the only way to get the tab **text** to change, doesn't work for the slider bar
color: getColor_fromText("color"); //defined in main.scss
}
</style>