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

Question

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

我想改变身体的CSS。

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

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

但是，根据本教程（Blazor Change Validation default css class names）的说法，似乎我只能通过更改类名来更改 CSS。

穿越组件的时候太复杂了，尤其是body在所有组件的最上面。

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

Answer 1

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

最简单：就像你可以使用 class 属性一样，使用 style 属性

<element style=@myStyle></element>

@code {
  string myStyle;

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

高级：使用 JS 互操作

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

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

湾 在剃刀文件中：

@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 元素应用于您的特殊情况（上面的“高级”方法）。

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

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

湾 在剃刀文件中：

@Inject IJRRuntime JSRuntime
(...)

@code {

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

Answer 2

好吧，Blazor 还不支持直接 css 修改，因为 Web Assembly 不支持。无论如何，它在 Web Assembly/Blazor 的路线图上。

因此，您最好的选择是使用变量更改类名。最起码到现在。