小编Jav*_*ano的帖子

我需要自定义 MubBlazor MusSelect 组件的外观。基本上我想将背景应用于输入并让标签具有透明背景。

原来的：

风俗：

这可以通过覆盖某些全局 css 文件（例如 site.css）中的某些 mudblazor css 类来轻松实现：

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {\n    background: #ffffff;\n    margin-top: 15px;\n}\n

为了能够将自定义组件与原始 mudSelect 结合使用，我向 mudSelect 组件添加了一个类：

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {\n    background: #ffffff;\n    margin-top: 15px;\n}\n

.custom-select .mud-input-text {\n    background: #ffffff;\n    margin-top: 15px;\n}\n

但我不想每次需要使用自定义外观时都添加一个类，因此我决定实现一个继承自 mudSelect 的组件。

SelectBox.razor

<MudSelect Class="custom-select" T="string" Label="Coffee" AnchorOrigin="Origin.BottomCenter">\n    <MudSelectItem Value="@("Cappuccino")" />\n    <MudSelectItem Value="@("Cafe Latte")" />\n    <MudSelectItem Value="@("Espresso")" />\n</MudSelect>\n

现在我们可以使用我们的自定义组件：

.custom-select …