我正在尝试在输入元素上应用转换,但这里有些东西不起作用: 我不知道我哪里错了。 输入元素似乎不受转换标签的影响。 .mainForm { border-radius: 50px; border: springgreen 5px solid; width: 50%; padding: 50px; m ...
提示:本站收集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,但输入和表单元素也没有。
我尝试为组件添加 class 名称并使用深度选择器,如下所示:
::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; }
}
}
@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>
标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.