提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我有一个页面 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; }
}
}
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.