VuetifyのCSSを変更できない

Question

VuetifyのBottom Navを使用しボトムナビを作成したのですが、アクティブになっているメニューのフォントが少し大きくなってしまうのをならないようにしたいです。

https://vuetifyjs.com/ja/components/bottom-navigation

ディベロッパーツールでCSSを見てみたところ以下の設定があり、font-size: 12px;のチェックマークを外したらサイズが変わらなくなったので、ソースに.v-item-group.v-bottom-nav .v-btn .v-btn__content {font-size: 12px;}を記載したのですが変更されません。
!importantをつけても効かないし、キャッシュをクリアしても効いていないのですがなぜでしょうか？？
原因がわかる方がおられましたらご教授いただければ助かります。よろしうお願いいたします。

.v-item-group.v-bottom-nav .v-btn .v-btn__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    font-size: 12px;
    white-space: nowrap;
    will-change: font-size;
}

Comments

[退会済みユーザー]

サイズが変わらなくなったとは？

[Khy]

申し訳ございません、自己解決致しました。

Answer 1

文字を囲っているspan要素にstyleを適応したら解決しました。