Input label font-size of v-text-field in Vuetify

在 Vuetify 中針對 v-text-field 要修改標題 Label 字型大小, 如下表單中的 label="Account*" & label="E-mail*" 有兩種方法

<template>
 <span>
  <v-form ref="form" v-model="valid" lazy-validation>
   <v-container>
     <v-row>
    <v-col cols="12" sm="6" md="4">
      <v-text-field
     v-model="user.username"
     :counter="50"
     :rules="nameRules"
     label="Account*"
     required
      ></v-text-field>
    </v-col>
    <v-col cols="12" sm="6" md="4">
      <v-text-field
     v-model="user.email"
     :rules="emailRules"
     label="E-mail*"
     required
      ></v-text-field>
    </v-col>
     </v-row>
   </v-container>
  </v-form>
 </span>
</template>

第一種: 直接在本身檔案裡加入下方的 style lang="scss" scoped , 這表示只有此頁面有作用

<style lang="scss" scoped>
::v-deep .v-label {
  font-size: 1em
}

::v-deep .v-label--active {
  font-size: 1.25em;
  font-weight: bold;
}
</style>

第二種: 寫在全域檔案裡, 這時要在 css 中加入 !important , 這樣的話, 所有的頁面都會一致.

## Input Label
.v-input .v-label {
  font-size: 1em !important;  
}

.v-input .v-label--active {
  font-size: 1.25em !important;
  font-weight: bold !important;
}

參考:

VueJS deep selector