javascript - 如何在 Blazor 中动态生成 CSS 规则

Question

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

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

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

JS 互操作是可以接受的。

Answer 1

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

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