更改 <v-radio> vuetify 的字体大小

Question

我刚开始使用 vuetify。我想更改 <v-radio> 按钮及其标签的字体大小。直接应用 css 无效。所以我搜索了一些答案，但这些答案很短。我无法应用它们。谁能帮我解释一下如何在 vuetify 中更改字体大小？ TIA

已更新：

<template>
<v-flex xs6>
    <p class="title-input">Jenis Kelamin</p>
    <v-radio-group id="id-gender" class="no-space" v-model="genderSelect" :mandatory="false" row @change="genderAction">
       <v-radio class="gender" label="Pria" value="Pria"></v-radio>
       <v-radio class="gender" label="Wanita" value="Wanita"></v-radio>
    </v-radio-group>
    <span class="text-error" v-show="genderError">Mohon diisi</span>
</v-flex>
</template>

<style scoped src="../style/Shortform.css">

</style>

Answer 1

得到答案。在我的 css 文件中，我所要做的就是

.customClass >>> label

添加这些 >>> 图标解决了问题。

Answer 2

如果您想在 .vue 文件中使用样式标签，您可以选择从样式标签中删除 scoped 并直接定位标签。

<style>
  .v-label {
    font-size: desired size
  }
</style>

如果您碰巧有一个单独的 .css 文件，您仍然可以使用此方法并忽略 <style> 标签

.v-label {
  font-size: desired size
}

Answer 3

这对我有用：

.small-radio i {
  font-size: 19px;
}
.small-radio label {
  font-size: 14px;
  padding-left: 0px;
  margin-left: -4px;
}
.small-radio .v-radio {
  padding: 0px;
}
.small-radio [class*="__ripple"] {
  left: 0;
}

在必填项前加上v-deep::。

将样式添加到 v-radio-group:

<v-radio-group class="small-radio" v-model="radioGroup">
   <v-radio
    ...
   ></v-radio>
</v-radio-group>

更改 <v-radio> vuetify 的字体大小

Change font-size of <v-radio> vuetify

vuejs2

vuetify.js