如何缩小MudBlazor复选框和单选按钮的标签尺寸？

一、调整标签文字尺寸 #

你当前直接在组件的Style属性里设置字体样式，可能因为MudBlazor的组件结构，样式没有精准作用到标签元素上。建议使用组件自带的LabelClass属性来单独给标签指定样式：

1. 定义CSS类：

.small-checkbox-label {
    font-size: 0.8rem; /* 自定义尺寸，比如0.8rem */
    font-weight: bold;
}

2. 在MudCheckBox上应用该类：

<MudCheckBox T="bool" Size="Size.Small" LabelClass="small-checkbox-label" Label="Is Email Forward Required for 30 Days?" />

这样样式会直接作用到标签文本，比全局的Style属性更精准。

二、自定义复选框（或单选按钮）的尺寸 #

MudBlazor的Size属性只提供预设的Small/Medium/Large选项，无法直接传入自定义数值。要实现自定义尺寸，需要通过CSS覆盖组件的默认样式：

方法1：使用CSS变量（推荐） #

MudBlazor组件内置了CSS变量，你可以直接修改复选框的尺寸变量：

.custom-checkbox-size {
    --mud-checkbox-size: 16px; /* 自定义尺寸，比如16px */
}

然后在组件上添加这个类：

<MudCheckBox T="bool" Class="custom-checkbox-size" LabelClass="small-checkbox-label" Label="Is Email Forward Required for 30 Days?" />

方法2：直接修改元素样式 #

如果变量不生效，也可以直接选中复选框的输入元素设置宽高：

.custom-checkbox-size .mud-checkbox-input {
    width: 16px;
    height: 16px;
}

同样在组件上添加Class="custom-checkbox-size"即可。

为什么之前自定义CSS没效果？ #

大概率是选择器优先级不够，或者样式没有正确作用到目标元素。可以打开浏览器开发者工具，查看复选框元素的实际样式，确认你的自定义CSS是否被覆盖，如果是，尝试更具体的选择器，或者临时使用!important（尽量避免，优先调整选择器优先级）。

对于单选按钮（MudRadio），方法完全一致，只需要把CSS选择器换成.mud-radio-input或者变量--mud-radio-size即可。

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