blazor中的CSS隔离不'；不能使用预定义的表单元素

我有一个页面foo.razor，它代表一种形式：

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

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

另外，我知道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; }
    }
}

@*这就是“魔术”*@
段落

@代码{
TestModel SomeModel{get；set；}=new TestModel（）；
公共类测试模型
{
公共字符串属性1{get；set；}
公共字符串属性2{get；set；}
}
}

太棒了。谢谢我还发现这个描述了你刚才提到的技巧。

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