📖

Vuetify2.xのv-bottom-navigationがおかしくなる

2023/03/09に公開

いつぞやからは分からないが、久しぶりにv-bottom-navigationを使ってみたらCSSがおかしくなっていた。

ボタンのサイズに関しては以下を参考に。
https://github.com/vuetifyjs/vuetify/issues/8067

ついでに、lightテーマでのボタンの背景色も透明にしたかったので修正。

適用したCSSは以下のとおり。

.v-item-group.v-bottom-navigation .v-btn.v-size--default {
  height: inherit;
  padding: 0 1.3rem;
}
.theme--light.v-btn.v-btn--has-bg {
  background-color: transparent !important;
}

結果

Discussion