无法从孤立的CSS文件覆盖Radzen Blazor组件样式

6g8kf2rb  于 2023-11-19  发布在  其他
关注(0)|答案(1)|浏览(85)

我在我的.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的东西,并在那里询问。

u3r8eeie

u3r8eeie1#

Radzen团队能够为我提供a solution to this issue。Brian帕克也对这个问题留下了类似的回应。这个问题并不是Radzen控件特有的,而是Blazor CSS隔离和子组件的一般问题。
解决方案是在Isolated CSS文件中添加::deep css伪元素,以针对子组件。因此Index.razor.css文件中的CSS应更改为:

::deep .rz-datalist-data {
  background-color: blue;
}

::deep .rz-g > div, ::deep .rz-datalist-data > li {
  padding: 0rem;
}

字符串
但是,仅仅这样还不足以解决这个问题。我们还必须将子控件 Package 在HTML元素中,例如<div>,以获取生成的CSS scope属性。因此,我们必须将Index.razor文件中的HTML更改为:

<div>
  <RadzenDataList ...>
    ...
  </RadzenDataList>
</div>


一旦这两个更改都被应用,CSS隔离将按预期工作。

相关问题