如何像 Vue 一样从父层向 Blazor 组件随机添加 CSS 属性？

Question

由于我想设计一些可重用的 Blazor 组件，我希望它们可以具有这样的功能：

假设我有一个自定义组件“MyComponent”，我可以在使用它时为其添加任何 CSS 属性：

<MyComponent Class="custom-css1 custom-css2">
    some child content...
</MyComponent>

在 MyComponent 中，我通常将一些常见的 CSS 属性固定到顶部 wapper，就像这样：

<div class="fixed-css1 fixed-css2">
    some child content...
</div>

这意味着我必须将 CSS 属性的两个部分组合在一起以制作最终的 HTML，如：

<div class="fixed-css1 fixed-css2 custom-css1 custom-css2">
    some child content...
</div>

所以我想我应该有这个模式：

<div class="@Classes">
    some child content...
</div>

@functions
{

    [Parameter]
    private string Class { get; set; } = "";

    private string fixedClass = "fixed-css1 fixed-css2";

    private string Classes
    {
        get
        {
            return $"{fixedClass} {Class}";
        }
    }
}

为了减少冗余代码，我可以创建一个基类，它具有受保护的 Class 属性和它固有的每个组件，但我仍然无法避免在每个组件中编写相同的组合代码。我希望有一些解决方案可以直接在我的基类中添加这些自定义 CSS，我想我可以通过覆盖 ComponentBase clss 的 BuildRenderTree 方法来实现这一点：

protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            base.BuildRenderTree(builder);
        }

但不幸的是，我已经尝试了所有手动构建的方法，但不知道如何完成。我不知道如何获取 HTML 的元素（例如“div”）并向其添加其他 CSS 属性。

所有这些都是关于做一个Vue可以轻松完成的功能。在 Vue 代码中，我们当然可以向组件添加任何属性并将它们传递给组件中的第一个元素。

有人可以帮我完成这个目标或给我一些建议吗？

Answer 1

我认为您的方法很好，它只需要对其进行一些抽象，以使其具有可读性并易于跨多个组件进行管理。

这就是我创建这个简单的辅助函数库的原因。这正是您在代码中所做的，但提供了一个 API 以确保一致性。

https://www.nuget.org/packages/BlazorComponentUtilities/