Как использовать CSS в качестве опоры для V-вкладки Vuetify? - PullRequest
Новая
       20

Как использовать CSS в качестве опоры для V-вкладки Vuetify?

0 голосов
/ 14 января 2020

Я пытаюсь изменить свой веб-сайт, чтобы облегчить замену цветовой палитры, поскольку мы все еще пытаемся найти цвета, которые по-прежнему работают. Мы используем Vue и Vuetify с S CSS, генерируя наш основной CSS файл. Мы используем почти исключительно Vue SFC. В настоящее время я озадачен проблемой V-Tab , когда «активная» панель под ней не меняет цвет.

Основная проблема заключается в том, что при использовании компонентов Vuetify в файле CSS имеет небольшое влияние. Когда я передаю color="#ffffff" в качестве реквизита, это прекрасно работает, все замечательно. Тем не менее, я не могу использовать CSS для того, чтобы изменить цвета таким же образом вообще (полученный код на самом деле имеет полосу в другом div вне элемента tab).

  • Я пытался переписать стиль элемента v-tabs-slider-wrapper всеми возможными способами, но безрезультатно
  • Я пытался использовать функции S CSS внутри computed раздел SF C
  • я пробовал basi c CSS и S CSS
  • я пробовал v-bind использование атрибута color для вычисляемой функции который ссылался на функцию S CSS
  • Я пытался использовать классы, идентификаторы, имена и т. д. c.
  • Я пытался background-color также на всех итерациях, в надежде

Если кто-нибудь может мне помочь, я буду признателен. 

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