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

添加＆gt;＆gt;＆gt;图标解决了这个问题。

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的字体大小

3 个答案: