在 Blazor 中使用 CSS 隔离通常需要将样式表嵌入到组件本身中。在实际开发中，这样会导致组件难以维护和扩展。为了解决这个问题，我们可以将 CSS 样式表单独保存为一个文件，并将其与组件代码分离。

步骤：

1. 在组件文件夹中创建一个名为“ComponentName.razor”的组件文件和一个名为“ComponentName.razor.css”的 CSS 样式文件。

2. 在组件代码文件（ComponentName.razor.cs）中，添加以下代码以在组件中设置 CSS 隔离：

using Microsoft.AspNetCore.Components;

namespace MyProject.Components
{
    public partial class ComponentName
    {
        [CascadingParameter(Name = "CssFile")] protected string CssFile { get; set; }

        private string GetCssFileName()
        {
            return CssFile ?? "ComponentName.razor.css";
        }
    }
}

3. 将以下代码添加到组件的 Razor 文件中，以指定在 CSS 文件中使用的类名称：

    


@code {
    [Parameter] public string CssClasses { get; set; }
}

4. 在组件代码中，可以通过以下方法设置 CSS 隔离文件的名称：

[CascadingParameter(Name = "CssFile")] protected string CssFile { get; set; }

如果未设置“CssFile”参数，默认情况下将使用组件文件夹中的“ComponentName.razor.css”文件。

现在，您可以使用以下命令在组件中设置 CSS 样式：

或者您可以通过以下方式为组件指定 CSS 文件：

    
        
            <