如何在 Blazor 中动态生成 CSS 规则答案

【问题标题】：How to dynamically generate CSS rules in Blazor如何在 Blazor 中动态生成 CSS 规则
【发布时间】：2021-05-27 23:49:39
【问题描述】：

换句话说，我需要生成 css 类并以某种方式将它们注入到页面中。

我需要在 C# 中在运行时修改类。

为什么？假设我的 razor 组件渲染了数千个元素，我需要更改所有这些元素的宽度。而不是修改许多元素的样式属性，我只想修改单个 css 规则。

JS 互操作是可以接受的。

【问题讨论】：

将样式元素注入页面的头部。您可以将需要覆盖的规则放在该内联表中，当页面呈现在客户端时，它们将在页面上具有更高的特异性。

标签： javascript css blazor

【解决方案1】：

首先，避免在组件内放置style 标签。每次渲染组件时，都会渲染样式标签。此外，如果您的 CSS 分散在应用程序的各个组件中，其他开发人员也很难找到它。

我通常不建议使用内联样式，但 CSS 变量确实改变了我对此的看法。 CSS 属性变量允许您在运行时使用 style 属性将值动态传递给 CSS。

@* This belongs in app.css *@
<style>
    :root {
        --my-width: 100px;
    }
    .example {
        background-color: #ccc;
        width: var(--my-width);
    }
</style>
@* ^ This belongs in app.css *@

<h1>Hello, Blazor REPL!</h1>
<label>Width</label>
<input @bind-value="@width" />
<p class="example" style="--my-width: @width">My Width is @width</p>

@code {
    string width = "100px" ;
}

您可以在此处查看在浏览器中运行的示例。 https://blazorrepl.com/repl/cFOdkmPA10gU73Hl18

【讨论】：

这确实很有趣。我不知道我可以以内联样式操作变量。让我想想我是否可以在我的场景中使用它