使用 Blazor 时总是困扰我的一件事是很容易意外地破坏组件之间的样式。您在一个组件中添加一个类，突然之间完全不同的页面上的其他内容看起来消失了。事实证明，Blazor 为此提供了一个内置解决方案：CSS 隔离。

什么是 CSS 隔离？

CSS 隔离使您可以将样式范围限定到特定组件。 Blazor 通过在构建时为每个组件生成唯一属性并将其附加到 CSS 选择器来实现此目的。因此，您的样式仅适用于它们所属的组件。

不需要 BEM 命名，不需要疯狂的特异性黑客。只是干净的、有范围的 CSS。

如何使用

假设您有一个名为 Card.razor 的组件：

<div class="card">
    <h3 class="card-title">@Title</h3>
    <p class="card-body">@ChildContent</p>
</div>

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

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

要添加独立样式，您只需创建一个具有相同名称但扩展名为 .razor.css 的文件。在本例中：Card.razor.css。

.card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    background: var(--color-bg-secondary);
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-body {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

就是这样！ Blazor 将自动选择它并将这些样式的范围仅限于 Card 组件。如果您在其他地方有另一个 .card 类，它不会受到影响。

它是如何工作的

当您构建项目时，Blazor 会重写 HTML 和 CSS。您的组件会获得一个独特的属性，例如 b-3x8qz7k2f1，并且 CSS 选择器会附加该属性：

.card[b-3x8qz7k2f1] {
    border: 1px solid var(--color-border);
    /* ... */
}

生成的 CSS 包作为 {ProjectName}.styles.css。确保您的 index.html 或 _Host.cshtml 中有此内容：

<link href="YourApp.styles.css" rel="stylesheet" />

如果您缺少该链接，您的独立样式将不会显示，您将花费 30 分钟思考发生了什么。相信我，我去过那里。

定位子元素

需要记住的一件事是，默认情况下，独立 CSS 仅适用于当前组件的元素。如果要为子组件内的元素设置样式，则需要 ::deep 组合器：

::deep .child-element {
    color: red;
}

这告诉 Blazor 也将样式应用于子组件中的匹配元素。当您有一个需要为其子组件设置样式的包装组件时，这非常方便。

何时使用它

我现在几乎每个组件都使用 CSS 隔离。它使事情保持干净和可预测。我唯一不使用它的时候是真正的全局样式，例如重置、版式或主题变量——这些样式位于共享 CSS 文件中。

希望你喜欢这篇文章！请随时通过任何社交媒体与我联系：@emimontesdeoca。

资源

• ASP.NET Core Blazor CSS 隔离