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

Posted 2023-02-23

【中文标题】更改 <v-radio> vuetify 的字体大小

【英文标题】：Change font-size of <v-radio> vuetify

【发布时间】：2018-08-31 10:46:15

【问题描述】：

我新使用 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>

【问题讨论】：

你能分享一些不起作用的代码吗？

更新为问题。

【参考方案1】：

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

.customClass >>> label

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

【讨论】：

你的意思是写 CSS : .gender >>> 标签吗？

现在使用 ::v-deep 例如：.blue--text::v-deep label color: #1976d2;

【参考方案2】：

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

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

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

.v-label 
  font-size: desired size

【讨论】：

要小心执行此操作，因为它将全局覆盖 vuetify 类，而不仅仅是在您的组件中。管理此问题的一个好方法是使用容器类挂钩它，因此 <style> #myComponent .v-label font-size: desired size </style> 以免意​​外覆盖其他组件中的样式

【参考方案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>