Vuetify - 样式化 v-bottom-nav 内容的问题答案

【问题标题】：Vuetify - Issue with styling v-bottom-nav contentVuetify - 样式化 v-bottom-nav 内容的问题
【发布时间】：2019-02-14 15:08:08
【问题描述】：

首先.. 我对 Vuetify 还很陌生.. 所以对某些人来说这似乎是一件微不足道的事情..

我需要一个底部导航（或为此目的的页脚），带有我可以随意格式化的链接..

我与 v-bottom-nav 仅采用 v-btn 项目作斗争，并且文本仅居中并且根本无法设置样式..

我浏览了大量示例和文档，但没有发现任何有用的东西。我猜我这里的方法有误。。

v-bottom-nav 结构：

<v-bottom-nav
                :value="true"
                absolute
                style="opacity:0.5"
              >
                <v-btn light>
                  <span>
                    Top 10 Australian beaches
                  </span>
                </v-btn>
              </v-bottom-nav>

在这里做了一支笔： VUE Bottom Navigation tryout..

【问题讨论】：

标签： vuetify.js

【解决方案1】：

您可以为组件添加范围样式 - 您可能需要先右键单击 >“检查”您的工具栏，以查看您需要覆盖哪些 CSS，例如

<style scoped>
    .v-item-group.v-bottom-navigation .v-btn {
        color: red !important;
    }
</style>

有关范围样式的更多信息：https://vue-loader.vuejs.org/guide/scoped-css.html

另外，考虑在导航（而不是按钮）级别添加属性，例如

<v-bottom-navigation
    color="primary"
    background-color="blue-grey lighten-5"
>
    <v-btn>
        <span>Top 10 beaches</span>
    </v-btn>
</v-bottom-navigation>

【讨论】：