Как нарисовать в Blazor Simple Boolean Lamp ⇐ CSS

[Anonymous]

Я пытаюсь нарисовать в приложении Blazor лампу в виде круга, которая изменила бы цвет на зеленый, когда активируется состояние логической переменной. Во -первых, я попытался просто отобразить серый круг, но ничего не показано. Я основываюсь на проекте с сайта: https://jonhilton.net/blazor-traffic-light/.
Код Home.razor выглядит:

Код: Выделить всё

@page "/"
@inherits ValveComponent

Home



< /code>
Я также прикрепил класс valvecomponent.razor.cs: < /p>
using Microsoft.AspNetCore.Components;

namespace GardenHMI
{
public class ValveComponent : ComponentBase
{
public bool IsOn { get; set; }

public void Toggle()
{
IsOn = !IsOn;
}
}
}
< /code>
и lamp.css: < /p>
.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%;
}

div.on {
background-color: greenyellow;
}

Структура проекта:

Результат, пока декабря не отображает круг, как я хотел. Сайт пуст:

Что я делаю здесь неправильно?

Подробнее здесь: https://stackoverflow.com/questions/796 ... n-variable