Csharp Blazor Foreach仅渲染最后一种 colored颜色

剃须刀/css colored颜色 问题

您面临的问题是如何将CSS应用于Razor页面中的ApptCard组件.您使用的<style>标记并不局限于组件，而是全局应用于整个页面.因此，当您循环遍历卡片时，每次迭代都会全局更新.apptColor类.因此，每个ApptCard都以循环最后一次迭代的背景 colored颜色 结束.

要解决此问题，您需要以这样一种方式应用样式:每个ApptCard都可以不受干扰地拥有自己唯一的背景 colored颜色 .一种解决方案是将背景 colored颜色 直接包括在MudPaper组件中.这确保了每张卡都有自己的 colored颜色 ，而不会被以后的循环迭代覆盖.

以下是你的ApptCard人的修订版，可以做到这一点:

@using System.Drawing

<MudPaper Class="pa-2" style="background-color: @RgbaColor;">@($"{Text}")</MudPaper>

@code {
    [Parameter] public string Text { get; set; } = null!;
    [Parameter] public string BoxColor { get; set; } = null!;
    private string RgbaColor => GetRgbaColor(BoxColor);

    private static string GetRgbaColor(string hexColor)
    {
        var color = ColorTranslator.FromHtml(hexColor);
        int r = color.R;
        int g = color.G;
        int b = color.B;

        // Adjust this value if you want to
        double a = 0.2; 
        return $"rgba({r}, {g}, {b}, {a})";
    }
}

在修改后的代码中，rgbaColor计算现在包含在名为GetRgbaColor的方法中.此方法在MudPaper组件的样式属性中直接调用.因此，该块不再是必需的，并且每张卡片的背景 colored颜色 由其自己的BoxColor参数确定.这确保了每个ApptCard组件都是单独设置样式的，从而解决了所有卡片都使用循环中的最后一种 colored颜色 呈现的问题.