问题描述
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>
希望以上解释了我的追求。我有什么想法可以实现这一目标吗?
更新
事实证明,问题出在 child razor 组件中的一个愚蠢的错字!我将问题留在这里,因为上述模式是在 razor 应用中提供主题的一种可行方式。
解决方法
问题中概述的模式很好。
问题是在子组件中使用变量名称时打错了字,因此使用问题中的模式将适用于处理特定布局中的主题。