Mudblazor css定制

Question

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

原件：

​

​

自定义：

​

​

这可以通过在一些全局css文件(例如site.css)中覆盖一些mudblazor css类来实现：

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

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

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

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

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

SelectBox.razor

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

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

<SelectBox T="string" Label="Coffee" AnchorOrigin="Origin.BottomCenter">
    <MudSelectItem Value="@("Cappuccino")" />
    <MudSelectItem Value="@("Cafe Latte")" />
    <MudSelectItem Value="@("Espresso")" />
</SelectBox>

这个解决方案的目标是区分MudSelect和我的CustomSelect，也可以通过将css移到组件中来隔离css。这个解决方案是有效的，但我无法移动css规则，因为css隔离不起作用。

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

Answer 1

在阅读了子组件支持核心的CSS隔离文档之后，我意识到我的问题是我没有使用父元素来应用作用域标识符。

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

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}";
            }
        }

SelctBox.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;
}