Case 1 (Ok)

Question

当试图将样式应用到 Blazor/ Razor 组件时, 当将样式移动到单独的 CSS 文件时, 我正面临一个问题。在我的项目中, 我定义了.razor 组件中的样式, 当直接应用此文件中的样式时, 这些样式被正确应用到该组件及其子组件中的 HTML 元素。

然而,当我将样式移动到单独的.razor.css 文件并尝试将其包含在 HTML 中时,有些样式不能正确应用到 HTML 元素中。具体地说,颜色样式应用正确,但边框样式不正确。

有人能帮助我理解为什么会发生这种情况,以及我怎样才能解决这个问题吗?

以下为该代码的一个简化示例:

Case 1 (Ok)

在Test1.razoor文件中:

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

在家庭.razoor档案中:

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

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

结果是“ Test1 标题” 文本以蓝色显示, 边框则以红色( OK) 显示。

Case 2 (??)

在家庭.razoor档案中:

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

在家庭.razor.cs档案中:

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

结果是“ Test1 标题” 文本以蓝色显示, 但红色边框不适用于 Test1. razor 中的元素。

所以, 模糊的 Home.razoor. css 文件正被正确地包含在 HTML 中, 如果没有语法错误的话。然而, 我无法理解为什么使用颜色样式正确, 但边框样式却不正确。

Answer 1

这是由 CSS 隔离设计的, 症状来自类 < code>. aeae , 不适用于子元素。正如您所看到的, 儿童元素只是从父体 DIV 继承的风格, 使颜色变成蓝色, 但边框不是没有继承的字体。然后父体 DIV 受到使用蓝色字体和红色边框的分类的影响。

如果我们想要将儿童部分应用在同一类中,我们需要 : deep . < a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/parties/cs-isolation?view=aspnetcore-8.0#child-subduction-support" rel=“不跟随 norefererr'>更多细节在这里可以看到。

如果我们在下面的父体元件.razor.cs 中定义代码, 那么我们可以看到像CASE1这样的组件。

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

Case 1 (Ok)

Case 2 (??)

友情链接