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

阿卜杜勒哈基姆

我有一个页面 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，但输入和表单元素又没有。

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

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

但这也不起作用。

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; }
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。