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 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 兼容性。
