Blazor中绘制基于布尔变量切换状态的简易指示灯无显示问题排查

看起来你遇到了Blazor里指示灯组件不显示的问题，我帮你梳理下几个可能的问题点，逐个排查应该就能解决啦：

1. CSS类名与样式优先级问题 #

你在Razor里写的<div class="on @(IsOn ? "on" : "off")">有个小疏漏：不管IsOn是true还是false，这个div都会带上on类，而且你没有定义.off类的样式。当IsOn为false时，这个div的类是on off，但你的CSS里.lamp div只有边框、宽高属性，没有默认背景色，所以它会是完全透明的，看起来就像没显示一样。

建议改成基础类+动态状态类的写法，比如：

<div class="@(IsOn ? "active" : "inactive")"></div>

然后对应的CSS补充关闭/默认状态的背景色，确保任何状态下圆形都能显示：

.lamp div.inactive {
  background-color: #6c757d; /* 灰色，关闭状态 */
}
.lamp div.active {
  background-color: greenyellow; /* 绿色，开启状态 */
}

2. CSS文件是否正确引入 #

Blazor项目里，CSS文件必须正确引用才能生效。如果你的lamp.css是放在wwwroot/css目录下的，要确保在index.html（WebAssembly项目）或者_Layout.cshtml（Server项目）里引入了这个文件，比如：

<link href="css/lamp.css" rel="stylesheet" />

如果没做这一步，所有样式都不会生效，自然看不到你要的圆形指示灯。

3. 组件初始化与渲染的小细节 #

你的Home.razor继承ValveComponent的写法没问题，但可以先给IsOn设个默认值，比如在ValveComponent的构造函数里加IsOn = true;，这样页面加载时就能直接看到绿色的圆形，快速验证样式是否生效。另外，你也可以在页面里加个按钮调用Toggle方法，方便测试状态切换：

<button @onclick="Toggle">切换指示灯状态</button>

快速修复的完整示例 #

给你调整后的完整代码参考，直接替换后应该就能正常显示了：

Home.razor #

@page "/"
@inherits ValveComponent

<PageTitle>Home</PageTitle>

<button @onclick="Toggle">切换指示灯状态</button>

<div class="lamp">
  <div class="@(IsOn ? "active" : "inactive")"></div>
</div>

ValveComponent.razor.cs #

using Microsoft.AspNetCore.Components;

namespace GardenHMI
{
    public class ValveComponent : ComponentBase
    {
        public bool IsOn { get; set; } = true; // 默认开启，方便测试显示效果

        public void Toggle()
        {
            IsOn = !IsOn;
        }
    }
}

lamp.css #

.lamp {
  padding: 1em;
  border: 1px solid grey;
  width: 6em;
  background-color: #343a40;
}

.lamp div {
  margin-bottom: 0.5em;
  border: 2px solid grey;
  width: 4em;
  height: 4em;
  border-radius: 50%;
}

.lamp div.inactive {
  background-color: #6c757d;
}

.lamp div.active {
  background-color: greenyellow;
}

内容来源于stack exchange