Vuetifyのv-btnの文字の白文字化にdarkを使わないで
Vuetifyを使い始めた当初はボタンの白文字化をするために安易にdark
を付与していました。
しかし、下記の文章からdark
では本来目的としている挙動を得られない事が分かりました。
※使っていくうちに不都合が見つかる
https://vuetifyjs.com/ja/components/buttons/
v-btn は dark prop を使用したときに振る舞いが変化する唯一のコンポーネントです。通常のコンポーネントは dark prop を使用して暗い色の背景であることを明示し、テキストを白に変更する必要があります。しかし、v-btn では自動的にスタイルが変化するので、ボタンが白い背景と組み合わせて無効化されているときなど、色のついた背景の上に置かれているときのみこの prop を使用することをおすすめします。白いテキストが必要な場合は、ただ white-text クラスを追加するだけでテキストを白くできます。
白文字化はwhite--text
で実現
Vuetifyのカラークラスを与えてあげることで文字を白くします。
<template>
<div>
<v-btn class="white--text">
白文字のボタン
</v-btn>
</div>
</template>
注意!!
公式ではwhite-text
と記載されていますがwhite--text
が正解です。
ハイフンを一つ追加してください。
詳しく知りたい方は下記を参照
Vuetify Colors