LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

Organization

Vuetifyのv-btnが英字を勝手に大文字にするのを阻止する

version情報

Vuetify 2.3.19

v-btn の問題

v-btn内の英字テキストは全て大文字にされてしまいます。
例えば「Qiita」と入力したのに表示は「QIITA」になってしまう感じです。

スクリーンショット 2020-12-05 22.23.00.png

これはtext-transform: uppercaseが効いているためです。

解決法

組み込みのtext-noneクラスを付ければ、text-transform: noneが付与されるためこれを阻止することが可能です。

大文字にならない
  <v-btn class="text-none">
    Qiita
  </v-btn>
CodePen

See the Pen Vuetify text-none sample by Masa-Shin (@POPOPON) on CodePen.

色々な記事で様々な解決法が紹介されていますが、恐らくこれが2020年12月現在もっとも適切な方法だと思われます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0