如何修改Vuetify中<v-radio>按钮及标签的字体大小？

嘿，我太懂你这种直接写CSS却完全没效果的憋屈了！Vuetify的组件样式封装得比较深，普通的类选择器优先级不够，而且Vue的scoped样式还会限制作用域，所以得用点针对性的方法来覆盖。下面我结合你的代码模板，给你详细讲几种可行的方案：

方案1：用深度选择器（最常用，针对单个组件） #

这是解决scoped样式无法穿透到Vuetify内部组件的核心方法。Vue3用::v-deep，Vue2还可以用/deep/，我们给v-radio-group加个自定义类，然后穿透到内部的标签样式：

<template>
  <v-flex xs6>
    <p class="title-input">Jenis Kelamin</p>
    <v-radio-group 
      id="id-gender" 
      class="custom-radio-group" 
      v-model="genderSelect" 
      :mandatory="false" 
      row
      @change="handleGenderChange"
    >
      <v-radio label="Laki-laki" value="male"></v-radio>
      <v-radio label="Perempuan" value="female"></v-radio>
    </v-radio-group>
  </v-flex>
</template>

<script>
export default {
  data() {
    return {
      genderSelect: ''
    }
  },
  methods: {
    handleGenderChange() {
      // 你的逻辑代码
    }
  }
}
</script>

<style scoped>
/* 穿透到Vuetify内部的标签元素 */
.custom-radio-group ::v-deep .v-label {
  font-size: 18px; /* 改成你想要的字体大小 */
}

/* 如果连单选按钮的圆圈大小也要调整，加这段 */
.custom-radio-group ::v-deep .v-radio__circle {
  width: 20px;
  height: 20px;
}
</style>

原理：::v-deep会让你的样式突破scoped的限制，作用到Vuetify组件内部的.v-label（这是Vuetify用来渲染radio标签的默认类），这样就能覆盖默认样式了。

方案2：用Vuetify内置的Typography类（更贴合框架规范） #

Vuetify自带一套预定义的字体大小类，比如text-sm、text-body-1、text-lg这些，直接加到v-radio上就能生效，不用写额外CSS：

<v-radio label="Laki-laki" value="male" class="text-lg"></v-radio>
<v-radio label="Perempuan" value="female" class="text-lg"></v-radio>

默认主题下，text-lg对应18px，text-body-1是16px，你可以根据需求选合适的类。如果需要更灵活的样式，还可以自定义标签slot：

<v-radio value="male">
  <template v-slot:label>
    <span class="my-custom-label">Laki-laki</span>
  </template>
</v-radio>

<style scoped>
.my-custom-label {
  font-size: 19px;
  color: #333; /* 还能顺便改颜色 */
}
</style>

这种方法不用深度选择器，因为标签是你自己写的元素，样式直接生效。

方案3：全局统一修改（适合全项目风格统一） #

如果你的项目里所有单选框的字体大小都要改，那直接在全局样式文件（比如App.vue的非scoped样式，或者src/styles/main.css）里写：

/* 全局修改所有v-radio的标签字体 */
.v-radio .v-label {
  font-size: 17px;
}

/* 全局调整单选按钮圆圈大小 */
.v-radio__circle {
  width: 19px;
  height: 19px;
}

如果遇到优先级不够的情况，可以加!important（尽量少用，除非实在没办法）：

.v-radio .v-label {
  font-size: 17px !important;
}

为啥直接写CSS没用？ #

简单说就是两个原因：一是Vuetify组件内部的元素有自己的样式类，优先级比你写的普通类高；二是如果你的样式加了scoped，Vue会给样式加一个唯一的属性选择器（比如[data-v-xxxxxx]），而Vuetify内部的元素没有这个属性，所以你的样式根本作用不到它们身上。深度选择器就是用来破解这个限制的。

内容的提问来源于stack exchange，提问作者Alauddin Ahmed