blazor 中的 CSS 隔离不适用于预定义的表单元素

Question

我有一个页面，foo.razor，它代表一个表单：

<EditForm Model=SomeModel>
    <InputText @bind-Value=SomeModel.Property1 />
    <InputText @bind-Value=SomeModel.Property2 />
    <p>a paragraph</p>
</EditForm>

在它旁边我有一个孤立的 CSS, foo.razor.css，例如：

input{
  display: block;
}
p{
  color: lime;
}

段落的样式正确应用，但输入元素的样式不正确。 我不明白为什么。

另外，我知道 blazor 在编译后会为元素生成随机 id。 在浏览器中，我可以看到该段落具有这样的 id，但输入和表单元素也没有。

我尝试为组件添加 class 名称并使用深度选择器，如下所示：

::deep .classname {
  .......
}

但这也不起作用。

Answer 1

CSS 隔离的棘手之处在于它仅适用于普通的 HTML 节点，不适用于组件。 在幕后，定义隔离 CSS 的当前组件中的元素获得自定义（某种随机）属性，并且 CSS 规则级联通过该属性以将范围限定为当前组件。 框架不知道其他组件内部是什么，因此它无法向它们添加该属性-它们的呈现是它们自己的。 因此，这些范围内的 CSS 规则不能针对组件。

如何解决这个问题 - 将您的组件包装在当前组件的 HTML 元素中，并通过用::deep替换该元素来编写规则以定位该容器内的元素。

这是一个例子：

input,
::deep input{
    display: block;
    border: 2px solid red;
}

p,
::deep p {
    color: lime;
    border: 2px solid red;
}

这是修改表单的方法

<EditForm Model=SomeModel>
    <div> @* This div right here is the "magic" *@
        <InputText @bind-Value=SomeModel.Property1 />
        <InputText @bind-Value=SomeModel.Property2 />
        <p>a paragraph</p>
    </div>
</EditForm>

@code{
    TestModel SomeModel { get; set; } = new TestModel();
    public class TestModel
    {
        public string Property1 { get; set; }
        public string Property2 { get; set; }
    }
}

Answer 2

@rdmptn 的答案是正确的，但无论如何我都会加两分钱。 我挣扎了很长时间才能理解并获得::deep工作，我将分享我的旅程。

想象一下，我们想要覆盖子组件中<p>标记的颜色：

MyComponent.razor.css

::deep p { color: red !important; }

MyComponent.razor：

<span>My component!</span>
<OtherComponent/>

其他组件。razor：

<p>Other component!</p>

现在，为MyComponent.razor生成的 HTML 看起来像：

<span random1="">My component!</span>
<p random2="">Other component!</p>

Every.razor 组件有一个随机的、唯一的组件 ID，它被分配给它的所有普通 HTML标记，即<div> 、 <p> 、 <span> 、 <img>等。注意MyComponent中的<span>元素如何被标记为random1 。 同样， <p>元素被标记为random2因为该元素是在OtherComponent中定义的。

但是从MyComponent.razor.ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ 生成的 CSS 看起来像：

[random1] p { color: red !important; }

也就是说， ::deep CSS 选择器变成类似于“在带有标签random1的元素下的所有<p>类型的元素”。 从上面生成的 HTML 可以看出，这与OtherComponent中的<p>不匹配。 这就是为什么将内容包装在<div>中的原因：

MyComponent.razor （更新）

<span>My Component!</span>
<div>
    <OtherComponent/>
</div>

以及新生成的 HTML：

<span random1="">My Component!</span>
<div random1="">
  <p random2="">Other component!</p>
</div>

现在::deep CSS 选择器将匹配OtherComponent中的<p>标签。