Vuetify의 v-btn 알파벳이 대문자가되는 이유는 무엇입니까?

머티리얼 디자인의 사양이다

Button anatomy - Material Design
Button Text button - Material Design

머티리얼 디자인에서는 기본적으로 버튼의 텍스트에는 어퍼 케이스의 알파벳을 사용합니다.
이것을 바탕으로 Vuetify에서는 css로 text-transform 로 알파벳을 대문자로 바꾸고 있습니다.

솔루션 1. CSS

How to make the global text not uppercase/capitalize - GitHub

특정 컴퍼넌트 전체에 적용하고 싶은 경우는 style 에 아래와 같이 지정해 덧쓰기한다.

<style scoped>
*{ text-transform: none !important; }
</style>

내 추천은 Vuetify의 v-btn를 그대로 사용하지 않고 SubmitButton.vue와 같은 파일을 만들고,
해당 구성 요소 내에 스타일을 적용하는 방법을 권장합니다.

솔루션 2. Vuetify 클래스 지정

Text and typography Text transform - Vuetify

아래가 이용 예입니다.
보시다시피 대문자화를 방지하는 스타일이 적용된 것이 아니라 선행 대문자로 만드는 스타일이 적용됩니다.

<!-- 表示: 「Submit」 -->
<v-btn class="text-capitalize">Submit</v-btn>

<!-- 表示: 「Submit Low Text」 -->
<v-btn class="text-capitalize">Submit low text</v-btn>

<!-- 表示: 「Submit TextTest」 -->
<v-btn class="text-capitalize">Submit testTest</v-btn>

<!-- 表示: 「Submitボタン」 -->
<v-btn class="text-capitalize">submitボタン</v-btn>