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，但输入和表单元素却没有。

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

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

我的组件.razor：

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

其他组件.razor：

<p>Other component!</p>

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

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

每个 .razor 组件都有一个随机、唯一的组件 ID，该组件 ID 被分配给其所有纯 HTML标签，即<div>、<p>、<span>、<img>等。请注意MyComponent<span>中的元素如何使用random1进行标记。同样，该元素被标记为random2，因为该元素是在OtherComponent内定义的。<p>

但是从MyComponent.razor.css生成的 CSS看起来像：

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

也就是说，::deepCSS 选择器变得类似于“具有该标签的元素下的所有类型元素 ”。从上面生成的 HTML 可以明显看出，这与来自OtherComponent 的HTML 不匹配。这就是为什么将内容包装在作品中的原因：<p> random1<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>

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