.net - 在 Blazor 组件中的 @ChildContent 上设置 CSS 类

Question

有没有办法在 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; }
}

然后我通过以下方式“注入(inject)” 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; }
}

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

Answer 1

这是一个想法:Blazor - How to create Components dynamically
此解决方案的问题是您只能从用户指定的类型创建子组件(不适用于 RenderFragment)，然后您只能完全覆盖类属性。