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

Question

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

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

为什么？假设我的剃刀组件呈现数千个元素，并且我需要更改所有这些元素的宽度。我不想修改许多元素上的样式属性，而是只想修改单个 css 规则。

JS 互操作是可以接受的。

Answer 1

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