如何缩小Mudblazor复选框和单选按钮中标签的大小？

Answer 1

您可以针对 MudBlazor 特定 CSS 类或 html 标签。

例如

<style>
.my-custom-checkbox{
    outline: 1px solid red;
}
<!-- For the checkbox label text -->
.my-custom-checkbox > .mud-input-control-input-container > label > p {
    outline: 1px solid yellow;
    font-size: small;
    font-weight: bold;
    font-family: monospace;
}
<!-- For the checkbox icon -->
.my-custom-checkbox > .mud-input-control-input-container > label > span > svg{
    outline: 1px solid teal;
    font-size: 45px;
}
</style>

<MudCheckBox @bind-Value="Basic_CheckBox1" Size="Size.Small" Label="Is Email Forward Required for 30 Days?"></MudCheckBox>
<MudCheckBox @bind-Value="Basic_CheckBox1" Color="Color.Primary" Size="Size.Medium"  Label="Is Email Forward Required for 30 Days?"></MudCheckBox>
<MudCheckBox @bind-Value="Basic_CheckBox1" Color="Color.Secondary" Size="Size.Large" Label="Is Email Forward Required for 30 Days?"></MudCheckBox>

<MudCheckBox @bind-Value="Basic_CheckBox1" Class="my-custom-checkbox" Label="Is Email Forward Required for 30 Days?" Color="Color.Tertiary"></MudCheckBox>

@code {
    public bool Basic_CheckBox1 { get; set; } = true;
}

👉 演示片段

我使用浏览器开发工具来找出类标签结构是什么。