如何在 Blazor 中直接更改 css（不带变量）？

我正在使用 Blazor 的服务器端。

我想改变body的CSS。

在 Jquery 中我可以轻松地编写这样的代码：

$("body").css("overflow-y","hidden");

但是，通过本教程（Blazor 更改验证默认 css 类名称 https://stackoverflow.com/questions/58199723/blazor-change-validation-default-css-class-names）说，看来我只能通过改变类名来改变CSS。

跨越组件时非常复杂，尤其是body位于所有组件的顶部。

我想知道是否有一种方法可以直接在 Blazor 中更改 CSS。谢谢。

有几种方法可以摆脱“blazor 方式”做事并完成元素的 css 修改。

Simplest: 就像可以使用class属性一样，使用style属性

<element style=@myStyle></element>

@code {
  string myStyle;

  void MyMethod() {
     myStyle="overflow-y: hidden;"
  }
}

Advanced: 使用JS互操作

A。在主视图中（index.html or Pages/_Host.cshtml取决于项目类型），为您的组件创建一个 js 端点

<script>
   window.applyStyleForElement = function(styleOp) {
       document.getElementById(styleOp.id).style[styleOp.attrib] = styleOp.value;
   }
</script>

b.在剃刀文件中：

@Inject IJRRuntime JSRuntime
<element id=@myId></element>

@code {
  string myId = Guid.NewGuid().ToString("n");

  async Task MyMethod() {
     await JSRuntime.InvokeAsync("applyStyleForElement", 
      new { id = myId,  attrib = "overflowY", value = "hidden" });
  }
}

最后，使用 body 元素应用于您的特殊情况（上面的“高级”方法）。

A。在主视图中（index.html or Pages/_Host.cshtml取决于项目类型），创建一个js端点

<script>
   window.applyStyleForBody = function(style) {
       document.body.style[style.attrib] = style.value;
   }
</script>

b.在剃刀文件中：

@Inject IJRRuntime JSRuntime
(...)

@code {

  async Task MyMethod() {
     await JSRuntime.InvokeAsync("applyStyleForBody", 
       new { attrib = "overflowY", value = "hidden" });
  }
}