我在我的.NET 7 Blazor Server项目中使用Radzen Blazor components。我遇到了一个问题,如果我将应用于Radzen组件的样式放在全局wwwroot/css/site.css
文件中,它们就可以工作,但如果我将它们放在页面的CSS隔离文件中,它们就不能工作在隔离的CSS文件中定义的其他样式工作正常,所以我知道CSS隔离设置正确;只是Radzen组件的样式不工作。
我已经创建了this small sample application来重现这个问题。我不确定这个问题是Blazor框架中的错误,还是Radzen如何实现其组件样式的特定问题,或者我只是缺少了一些关于using CSS isolation如何应用CSS样式的问题。
例如,我在Index.razor.css
文件中有这样的CSS代码(.rz*
规则不适用):
/* This gets applied properly, so I know the Isolated CSS file itself is being applied. */
p {
color: red;
}
/* For some reason these do not work from the Isolated CSS file, but do work from the wwwroot/css/site.css file */
/* Even using "!important" seems to have no effect when in the Isolated CSS file. */
.rz-datalist-data {
background-color: blue;
}
.rz-g > div, .rz-datalist-data > li {
padding: 0rem !important;
}
字符串
如果我在wwwroot/css/site.css
文件中定义.rz*
规则,它们可以正常工作:
/* When these rules below are applied in this file, they work fine. They do not work when defined in an Isolated CSS file though. */
.rz-datalist-data {
background-color: blue;
}
.rz-g > div, .rz-datalist-data > li {
padding: 0rem;
}
型
大多数其他类似的问题在他们的_Host.cshtml
文件中缺少<link href="[Your Project Name].styles.css" rel="stylesheet" />
,但这不是我的问题,因为我已经添加了独立CSS文件中的其他样式,并按预期工作。
对于为什么在使用CSS隔离时某些组件的样式不起作用,有什么想法吗?
更新:我已经找到了听起来像the same problem on the Radzen forums的东西,并在那里询问。
1条答案
按热度按时间u3r8eeie1#
Radzen团队能够为我提供a solution to this issue。Brian帕克也对这个问题留下了类似的回应。这个问题并不是Radzen控件特有的,而是Blazor CSS隔离和子组件的一般问题。
解决方案是在Isolated CSS文件中添加
::deep
css伪元素,以针对子组件。因此Index.razor.css
文件中的CSS应更改为:字符串
但是,仅仅这样还不足以解决这个问题。我们还必须将子控件 Package 在HTML元素中,例如
<div>
,以获取生成的CSS scope属性。因此,我们必须将Index.razor
文件中的HTML更改为:型
一旦这两个更改都被应用,CSS隔离将按预期工作。