Vuetify의 v-btn 문자를 백문화하기 위해 dark를 사용하지 마십시오.

Vuetify를 사용하기 시작한 당초에는 버튼의 흰색 문자화를 하기 위해 안이하게 dark 를 부여하고 있었습니다.
그러나, 아래의 문장으로부터 dark 에서는 본래 목적으로 하고 있는 거동을 얻을 수 없는 것을 알았습니다.
※사용해 갈 때 불편함이 발견된다

htps : // ゔ에치 fyjs. 코 m / 자 / 코 m 포넨 ts / 부톤 s /


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