Blazor中Foreach循环仅渲染最后一个颜色的问题求助

核心问题 #

所有卡片显示最后一个颜色的原因是组件样式未作用域隔离：你的ApptCard组件中的<style>标签没有添加scoped属性，导致.apptColor类是全局生效的。每次循环渲染组件时，都会重新定义全局的.apptColor样式，最后一个组件的样式会覆盖之前所有的，因此所有卡片都使用最后一次计算的颜色。

另外，@key使用a.Text存在风险：如果多个预约的Text重复，Blazor会错误地复用组件实例，导致状态混乱。

修复步骤 #

1. 给组件样式添加作用域隔离

修改ApptCard组件的<style>标签，添加scoped属性，确保样式仅作用于当前组件实例：

@using System.Drawing

<style scoped>
    .apptColor{
        background-color: @rgbaColor;
    }
</style>

<MudPaper Class="pa-2 apptColor">@($"{Text}")</MudPaper>

@code {
    [Parameter] public string Text { get; set; } = null!;
    [Parameter] public string BoxColor { get; set; } = null!;
    private string rgbaColor = string.Empty;

    protected override Task OnInitializedAsync()
    {
        var color = ColorTranslator.FromHtml(BoxColor);
        int r = color.R;
        int g = color.G;
        int b = color.B;
        rgbaColor = $"rgba({r}, {g}, {b}, 0.2)";

        return base.OnInitializedAsync();
    }
}

注：修复了MudPaper中模板字符串的语法错误（缺少闭合引号），同时简化了颜色值的转换代码（color.R本身就是整数，无需额外转换）。

2. 使用唯一的@key值

修改循环中的@key，使用预约对象的唯一标识（比如a.Id），确保Blazor能正确跟踪每个组件实例：

@foreach (var a in appt.ToList())
{
    var userColor = users.FirstOrDefault(x => x.Id == a.Id)?.Color ?? "#ffffff"; // 添加默认值避免空引用
    <ApptCard @key="a.Id" Text="@a.Text" BoxColor="@userColor"/>
}

注：提前计算userColor并添加默认值，避免重复执行Where查询，同时防止FirstOrDefault()返回null导致的异常。

3. 可选：优化颜色更新逻辑（增强健壮性）

如果后续存在参数变更的场景，将颜色计算逻辑移至OnParametersSetAsync方法，确保参数更新时颜色能同步更新：

protected override Task OnParametersSetAsync()
{
    var color = ColorTranslator.FromHtml(BoxColor);
    rgbaColor = $"rgba({color.R}, {color.G}, {color.B}, 0.2)";
    return base.OnParametersSetAsync();
}

原理说明 #

• Scoped样式：Blazor会给使用scoped的样式自动添加唯一的属性选择器（比如[b-xxxxxxx]），确保每个组件实例的样式仅作用于自身，不会互相覆盖。
• 唯一@key：Blazor通过@key识别循环中的每个项，避免因项顺序变化或重复值导致的组件复用错误，保证每个组件实例的状态独立。

内容的提问来源于stack exchange，提问作者None