使用 .razor.css 时 Blazor/Razor 组件中的样式问题

Question

当我将样式移动到单独的 CSS 文件时，尝试将样式应用到 Blazor/Razor 组件时遇到问题。在我的项目中，我在 .razor 组件中定义样式，当直接在此文件中应用样式时，样式将正确应用于该组件及其子组件中的 HTML 元素。

但是，当我将样式移至单独的 .razor.css 文件并尝试将其包含在 HTML 中时，某些样式未正确应用于 HTML 元素。具体来说，颜色样式应用正确，但边框样式应用不正确。

有人可以帮助我理解为什么会发生这种情况以及如何解决这个问题吗？

这是代码的简化示例：

案例1（好的）

在 Test1.razor 文件中：

<div class="aeae">
    <h5>Test1 Title</h5>
</div>

在 Home.razor 文件中：

<div class="aeae">
    <h5>Home</h5>
    <Test1 />
</div>

<style>
    .aeae {
        border: 1px solid red;
        color: blue;
    }
</style>

结果是“Test1 Title”文本显示为蓝色，边框显示为红色（OK）。

案例2（??）

在 Home.razor 文件中：

<div class="aeae">
    <h5>Home</h5>
    <Test1 />
</div>
/* Removed <style> from Home.razor */
- <style>
-     .aeae {
-         border: 1px solid red;
-         color: blue;
-     }
- </style>

在 Home.razor.css 文件中：

.aeae {
    border: 1px solid red;
    color: blue;
}

结果是“Test1 Title”文本显示为蓝色，但红色边框并未应用于 Test1.razor 中的元素。

因此，如果没有语法错误，显然 Home.razor.css 文件已正确包含在 HTML 中。但是，我不明白为什么颜色样式应用正确，但边框样式却不正确。

Answer 1

这是 CSS 隔离的设计，其症状是由于类

.aeae

未应用于子组件。如果我们希望子组件应用同一个类，我们需要

::deep

。 更多详情可以在这里查看。

如果我们在 ParentComponent.razor.css 中定义下面的代码，那么我们就可以看到像 CASE1 一样渲染的组件。

.aeae {
    border: 1px solid red;
    color: blue;
}
::deep .aeae {
    border: 1px solid red;
    color: blue;
}