为 Blazor 中的主题设置“深入”CSS 变量

如何解决为 Blazor 中的主题设置“深入”CSS 变量

mylayout.razor.css

:root {
  --clr-one: blue;
  --clr-two: red;
}
.wrapper.normal {
  --bg: var(--clr-one);
  --clr: var(--clr-two);
}
.wrapper.reversed {
  --bg: var(--clr-two);
  --clr: var(--clr-one);
}
.title {
  background-color: var(--bg);
  color: var(--clr);
}

mylayout.razor

<div class="wrapper @Theme">
    <div class="title">
        My Title
    </div>
    @Body
</div>
@code {
  string Theme = mycondition ? "normal" : "reversed";
}

使用上述内容，我的“标题”的颜色将根据“mycondition”的值进行切换。我觉得我正在从布局中选择主题。

我现在可以更改 :root 颜色，这会影响“主题”，因此我可以使用这些基本颜色，直到我满意为止。

鉴于“title”是“wrapper”的子元素，我假设分配给“wrapper”的变量--bg 和--clr 将传播到所有子元素。但是……

myroutable.razor.css

.header {
   background-color: var(--bg);
}

myroutable.razor

@page "/myroutable"
@layout mylayout
<div class="header">
    My Header
</div>

问题在于“标题”没有从布局中获取 --bg 变量的值。

希望以上解释了我的追求。我有什么想法可以实现这一目标吗？

更新

事实证明，问题出在 child razor 组件中的一个愚蠢的错字！我将问题留在这里，因为上述模式是在 razor 应用中提供主题的一种可行方式。

解决方法

问题中概述的模式很好。

问题是在子组件中使用变量名称时打错了字，因此使用问题中的模式将适用于处理特定布局中的主题。