Blazor中动态修改CSS自定义属性需通过JS Interop调用style.setProperty()，全局变量设在document.documentElement，局部变量作用于ElementReference；需手动调用StateHasChanged响应逻辑变化，并注意SSR兼容性与性能优化。
Blazor 中动态修改 CSS 自定义属性（即 CSS 变量）主要通过 JavaScript 互操作（JS Interop）操作 document.documentElement 或目标元素的 style.setProperty() 实现。Razor 组件本身不直接支持绑定 CSS 变量，需借助 JS 调用或 DOM 操作。
在根元素上设置全局 CSS 变量
适用于主题色、字体大小等全站级配置。通常写入 :root，对应 JS 中的 document.documentElement：
- 在
wwwroot/js/site.js中添加方法：
window.setCssVar = (name, value) => {
document.documentElement.style.setProperty(name, value);
};- 在 Blazor 组件中注入
IJSRuntime并调用：
@inject IJSRuntime JSRuntime
<p>@code {
private async Task UpdatePrimaryColor(string color) {
await JSRuntime.InvokeVoidAsync("setCssVar", "--primary-color", color);
}
}调用 UpdatePrimaryColor("#42b883") 后，所有使用 var(--primary-color) 的样式会立即更新。
为特定组件元素设置局部 CSS 变量
适合封装可复用组件（如卡片、按钮），避免污染全局作用域：
立即学习“前端免费学习笔记（深入）”；
- 给目标元素加
ref，例如：<div @ref="cardElement" class="card">...</div> - 在代码块中声明引用变量：
private ElementReference cardElement; - JS 端提供针对元素的设置方法：
window.setElementCssVar = (element, name, value) => {
element.style.setProperty(name, value);
};- Blazor 中调用：
await JSRuntime.InvokeVoidAsync("setElementCssVar", cardElement, "--card-bg", "#f5f5f5");
结合 StateHasChanged 实现响应式变量更新
CSS 变量本身不触发 Blazor 渲染，但若变量变化影响组件逻辑（如根据主题切换按钮文字），需手动触发重绘：
- 在 JS 设置变量后，同步更新 C# 状态字段（如
CurrentTheme） - 调用
StateHasChanged()使 UI 响应状态变化 - 示例：深色模式切换时，同时更新
--bg-color和IsDarkMode字段
注意事项与优化建议
避免频繁调用 JS Interop 影响性能：
- 批量更新多个变量时，尽量合并为一次 JS 调用（例如传入对象
{ '--color': 'red', '--size': '16px' }） - 不要在
OnAfterRender中无条件设置变量，防止循环调用 - 服务端渲染（SSR）下 JS 尚未加载，首次渲染时变量不可用，建议配合
OnInitializedAsync+ 条件检查 - 可封装成自定义服务（如
CssVariableService），统一管理设置/清除逻辑
基本上就这些。核心是 JS 侧操作 style.setProperty，Blazor 侧做好引用传递和时机控制。不复杂但容易忽略执行上下文和 SSR 兼容性。
