MudBlazor框架中MudTreeView组件如何修改复选框的大小和颜色？

云原生阿岚

2026-10-4

MudBlazor TreeView内部复选框样式修改方案

方法1：CSS样式覆盖

MudTreeView内置的复选框有固定类名.mud-treeview-item-checkbox，直接写样式覆盖即可：

/* 仅修改指定TreeView的复选框时，先给MudTreeView添加Class="custom-tree"，再加上前缀 */
.custom-tree .mud-treeview-item-checkbox .mud-checkbox-input {
    /* 缩放调整大小，按需修改数值 */
    transform: scale(1.5);
    margin: 0 4px;
}
/* 选中状态颜色 */
.custom-tree .mud-treeview-item-checkbox.mud-checked .mud-icon-root {
    color: #1976d2 !important;
}
/* 未选中状态边框颜色 */
.custom-tree .mud-treeview-item-checkbox:not(.mud-checked) .mud-icon-root {
    color: #90caf9 !important;
}

如果要全局生效，去掉.custom-tree前缀即可。

方法2：自定义Item模板（更灵活，推荐）

直接重写TreeViewItem的内容，自己嵌入MudCheckBox组件，所有原生参数都可以直接生效：

<MudTreeView T="YourItemType" Checkable="true" Items="@YourItemList">
    <ItemTemplate>
        <MudTreeViewItem Value="@context" 
                         Selected="@context.IsChecked"
                         SelectedChanged="e => CheckboxClicked(context.CategoryId, e)">
            <div style="display: flex; align-items: center; gap: 8px;">
                <!-- 这里直接设置Size、Color等MudCheckBox原生参数即可 -->
                <MudCheckBox @bind-Checked="@context.IsChecked" 
                             Size="Size.Large" 
                             Color="Color.Primary"
                             T="bool" />
                <span>@context.CategoryName</span>
            </div>
        </MudTreeViewItem>
    </ItemTemplate>
</MudTreeView>