web-dev-qa-db-ja.com

Vuetifyボタンのテキストの色を変更する方法は?

明らかな何かを見逃しているかもしれませんが、v-btnのテキストの色を変更する適切な方法がわかりません。これは機能しますが、!importantを使用する必要があるとは思えません。

.v-btn
  color: red !important

colorプロパティは、私が知っている限り、背景色専用です。 Vue.use(Vuetify, { theme: {...}} )を呼び出すときにテーマのプライマリ/セカンダリを変更できると思いますが、単一のコンポーネントをオーバーライドしたい場合はどうすればよいですか?

15
nachocab

cssクラス があり、vuetifyの任意の場所にテキストを色付けします。色に--textを追加するだけです。
だから例えば

<v-btn class="red--text">

テーマで定義された色でも機能するはずです。 primary--textなど。
これはv-btnに固有のものではなく、クラスはどこでも動作することに注意してください。

33
Traxo