繁体   English   中英

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

CSS isolation in blazor doesn't work with predefined Form elements

提示:本站收集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 {
  .......
}

但这也不起作用。

2 个回复

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>标签。

1 CSS 转换不适用于表单中的输入元素

我正在尝试在输入元素上应用转换,但这里有些东西不起作用: 我不知道我哪里错了。 输入元素似乎不受转换标签的影响。 .mainForm { border-radius: 50px; border: springgreen 5px solid; width: 50%; padding: 50px; m ...

3 表单元素不适用于模态

我正在使用以下代码在模式窗口内显示表单: 这是我的问题:只有第一个表单元素才允许输入。 其余的不允许任何人在其中输入任何信息,但是,当然,它们与第一个完全相同。 关于可能是什么原因的任何想法? 提前致谢! ...

2014-07-02 13:18:55 0 188   html5
4 JSF渲染不适用于表单元素

我在dialog显示了一个composite 。 我有一个edit按钮,该按钮获取当前bean @SessionScoped (数据表中的项目),然后更新UI。 我的应用程序与一个简单的CRUD应用程序非常相似,例如http://balusc.blogspot.com/2010/06/ben ...

6 Text-align不适用于表单元素

为什么text-align不适用于表单? 我希望我的表单与右边对齐。 请帮我。 我可以不用花车吗? 我的css: Jsfiddle: https ://jsfiddle.net/dsotpsq4/ ...

2017-06-08 13:48:04 6 93   html/ css
7 NotEmpty验证程序不适用于自定义表单元素

我为电话号码创建了一个自定义表单元素。 它由国际前缀的选择和实际电话号码的文本组成。 我的自定义验证错误工作正常,但是如果使用'required' =&gt; true创建元素,并且我将两个字段均留空,则不会触发任何错误。 如何使NotEmpty验证程序与自定义数组元素一起使用? ...

8 WPF:FindName()不适用于预定义的XAML代码

我有一个动态布局窗口应用程序,通过更改组合框中的值,文本框中的值也应更改。 文本框是网格的一部分,在&lt;window.resources&gt;定义,并在运行时添加到可视树中: 所以这就是我所做的: 问题在于,由于某种原因, FindName找不到文本框。 通过调试,我看 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM