在 Blazor 组件中的 @ChildContent 上设置 CSS 类答案

【问题标题】：Setting CSS class on @ChildContent in Blazor Component在 Blazor 组件中的 @ChildContent 上设置 CSS 类
【发布时间】：2020-06-17 18:31:54
【问题描述】：

有没有办法在 Blazor 组件内的子组件上设置 css 类？

我现在拥有的是：

@using Microsoft.AspNetCore.Components;
@inherits ComponentBase

<div class="button-group-wrapper">
    @SecondaryButton
    <div class="floating-sticky-wrapper">
        @PrimaryButton
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment PrimaryButton { get; set; }

    [Parameter]
    public RenderFragment SecondaryButton { get; set; }
}

然后我通过以下方式“注入”RenderFragments：

<FloatingStickyButton>
    <SecondaryButton>
        <button type="button" class="button ...">Secondary</button>
    </SecondaryButton>
    <PrimaryButton>
        <button type="submit" class="button button--primary ...">Primary</button>
    </PrimaryButton>
</FloatingStickyButton>

我想要什么？

我想在主按钮上设置名为“floating-sticky-button”的 CSS 类。但是我想在组件内部设置这个 css 类，这样程序员就不需要关心在按钮元素上设置外部类。

类似这样的东西（注意这里的 @PrimaryButton）：

@using Microsoft.AspNetCore.Components;
@inherits ComponentBase

<div class="button-group-wrapper">
    @SecondaryButton
    <div class="floating-sticky-wrapper">
        @PrimaryButton({class: 'floating-sticky-button'})
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment PrimaryButton { get; set; }

    [Parameter]
    public RenderFragment SecondaryButton { get; set; }
}

不幸的是，这不起作用。有没有办法做到这一点？

【问题讨论】：

标签： .net blazor

【解决方案1】：

这是一个想法：Blazor - How to create Components dynamically

此解决方案的问题在于，您只能从用户指定的类型创建子组件（不适用于 RenderFragment），然后您只能完全覆盖类属性。

【讨论】：

【解决方案2】：

很遗憾，恐怕您需要使用 javascript。像

这样的函数

var addClass = () => {
    let button = document.getElementsByClassName('button--primary');
    if (button && button[0] && button[0].classList)
        button[0].classList.add("floating-sticky-button");
}

并且（在您的组件中）

protected override async void OnAfterRender(bool firstRender)
{
    if (firstRender)
       await jsRuntime.InvokeVoidAsync("addClass");

    base.OnAfterRender(firstRender);
}

制造丑陋的把戏

【讨论】：

【解决方案3】：

可能为时已晚，一年后...

但如果有人遇到同样的问题，也许您可以在隔离的 CSS 文件中使用 ::deep 组合器来更改子按钮类定义（您不能注入/应用另一个类，但至少更改类定义）。

见：https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0

【讨论】：