Mudblazor MudSelect css 定制

Question

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

\n

原来的：

\n

\n

风俗：

\n

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

SelectBox.razor

\n

<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

\n

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

\n

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

\n

该解决方案的目标是区分 MudSelect 和我的 CustomSelect，同时通过将 css 移动到组件来实现 css 隔离。该解决方案有效，但我无法 \xc2\xb4t 移动 css 规则，因为 css 隔离不起作用。

\n

有更好的方法来解决这个问题吗？

\n

Answer 1

在阅读ASP.NET Core Blazor CSS 隔离文档中的子组件支持后，我意识到我的问题是我没有使用父元素来应用范围标识符。

因此，通过添加 div 并在我的作用域 css 中使用 ::deep 伪元素。一切正常

SelectBox.razor

    @inherits MudSelect<T>
        @typeparam T
        
        @namespace Common.Components
        <div>
        @RenderBase()
        </div>
        
        @code {
            public RenderFragment RenderBase() => builder => base.BuildRenderTree(builder);
        
            protected override void OnParametersSet()
            {
                base.OnParametersSet();
                Class = $".custom-select {Class}";
            }
        }

选择框.razor.css

::deep .mud-input-text {
    background: #ffffff;
    margin-top: 15px;
}

::deep .custom-select input {
    padding-left: 5px !important;
}

::deep .mud-input-control {
    margin-top: 0px;
}