是否有办法自定义MudBlazor组件MudTextField与圆角?

Question

我正在使用Blazor WebAssembly的项目，我使用了MudBlazor作为我的UI组件。我只是想知道一些组件不工作，当我试图使用类关键字"round -xl"或";rounded-lg"像这样在文本字段

的例子:

<MudTextField @bind-Value="TextValue" Label="Outlined" Variant="Variant.Outlined" Class="rounded-xl"></MudTextField>

Answer 1

你可以设置这个样式。

.mud-input-outlined-border { 
border-radius: 24px !important; 
} 

或者您可以覆盖MainLayout.razor中的默认主题值修改所有组件的默认border-radius。

@inherits LayoutComponentBase
<div style="height: 100vh">
<MudThemeProvider IsDarkMode="false" Theme="_customTheme" />
<MudDialogProvider />
<MudSnackbarProvider />

@Body
</div>
@code
{
private readonly MudTheme _customTheme = new()
{
LayoutProperties = new LayoutProperties()
{
DefaultBorderRadius = "24px",
}
};
}  

查看这些链接获取更多信息:泥浆主题和讨论