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

Question

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

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

为什么?假设我的razor组件渲染了数千个元素，我需要改变所有这些元素的宽度。比起修改许多元素的样式属性，我更愿意只修改单个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

Answer 2

我需要在Blazor中编辑类似的内容。长话短说是MatBlazor标签添加了一个style="pointer-events: auto;"，我需要禁用加载数据时。

https://www.matblazor.com/Tab

我是这样解决的:

index . html:

window.ChangeMatBlazorTabPointerEvents = (loadData) => {
var allTabs = document.querySelectorAll('.mdc-tab__content');
allTabs.forEach((tab) => {
if (loadData) {
tab.style.pointerEvents = 'none';
}
else {
tab.style.pointerEvents = 'auto';
}
});
}

Blazor (razor) file::

@inject IJSRuntime JSRuntime
await JSRuntime.InvokeVoidAsync("ChangeMatBlazorTabPointerEvents", loadData);

为什么我必须这样做的例子:

<MatTab Label="Threats and Countermeasures" Style="pointer-events: inherit;">

呈现:

<div class="matBlazor_theme_12345678-1234-1234-1234-123456789012 mat-tab-label mdc-tab" style="pointer-events: inherit;" role="tab" tabindex="0" id="matBlazor_id_82bcf7fc-5f04-48a0-aff0-d24dcc0b0ac3" _bl_92=""><!--!-->
<span class="mdc-tab__content" style="pointer-events: auto;"><!--!-->
<span class="mdc-tab__text-label">Threats and Countermeasures</span><!--!-->
</span><!--!-->
<span class="mdc-tab-indicator "><!--!-->
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span><!--!-->
<span class="mdc-tab__ripple"></span>
</div>

由于<span class="mdc-tab__content" style="pointer-events: auto;">

当前不工作下面的代码也不起作用，因为选项卡仍然有style="pointer-events: auto;"

<MatTab>
<LabelContent>
<span style="@((loadData ? "pointer-events: none;" : ""))"> Threats and Countermeasures </span>
</LabelContent>
<ChildContent>
Content
</ChildContent>
</MatTab>