在 Blazor 中为主题设置 CSS 变量'deeply'

Question

mylayout.rarzor.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.剃须刀

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

使用以上内容；标题"；将根据"0"的值进行切换；mycondition"；。我觉得我正在从布局中选择主题。

我现在可以更改：根颜色，这将影响"主题"，这样我就可以使用这些基础颜色，直到我满意为止。

假定"；标题"；是"；"包装物"；，我假设在"；包装器"；将传播到所有子元素。但是

myroutable.rarzor.css

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

myroutable.rarzor

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

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

希望以上能解释我想要的。有什么想法可以实现吗？

更新

事实证明，问题出在儿童剃须刀组件上！不过，我将把问题留在这里，因为上面的模式是在剃须刀应用程序中提供主题的一种可行方式。

Answer 1

问题中概述的模式很好。

问题是在子组件中使用变量名时出现了拼写错误，因此使用问题中的模式可以处理特定布局中的主题化。