Vue Кнопки AppBar имеют цвет фона - PullRequest
1 голос
/ 29 февраля 2020

Я написал следующий код для моей панели приложений, используя Каркас компонента Vuetify :

<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">

    <nav>
        <v-app-bar app>

            <v-btn v-if="$vuetify.breakpoint.smAndDown" @click="openDrawer = !openDrawer" text icon>
                <v-icon>mdi-view-headline</v-icon>
            </v-btn>
            <v-btn v-else :to="{name: 'home'}" text color="primary" class="ml-3" icon>
                <!-- Logo -->
                <img height="48"
                     :src="require('@/assets/logo.svg')"
                     alt="Manassa Logo"/>
            </v-btn>

            <div v-if="$vuetify.breakpoint.mdAndUp" class="mx-6"></div>

            <v-toolbar-items v-if="$vuetify.breakpoint.mdAndUp">
                <v-btn :to="{name: 'products'}" text color="primary">{{ $t('appBar.products') }}</v-btn>
                <v-btn :to="{name: 'services'}" text color="primary">{{ $t('appBar.services') }}</v-btn>
                <v-btn :to="{name: 'news'}" text color="primary">{{ $t('appBar.news')}}</v-btn>
                <v-btn :to="{name: 'blogs'}" text color="primary">{{ $t('appBar.blogs')}}</v-btn>
                <v-btn :to="{name: 'about'}" text color="primary">{{ $t('appBar.about')}}</v-btn>
                <v-btn :to="{name: 'help'}" text color="primary">{{ $t('appBar.help')}}</v-btn>
                <v-btn :to="{name: 'contact-us'}" text color="primary">{{ $t('appBar.contact-us')}}</v-btn>
            </v-toolbar-items>

        </v-app-bar>

    </nav>

</template>

Однако кнопки панели навигации всегда имеют цвет фона.

AppBar

Как я могу это исправить?

...