gpt4 book ai didi

css - 为 Blazor 中的主题设置 CSS 变量 'deeply'

转载 作者:行者123 更新时间:2023-12-04 17:18:50 26 4
gpt4 key购买 nike

<分区>

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";
}

使用上面的代码,我的“标题”的颜色将根据“我的条件”的值进行切换。我觉得我正在能够从布局中设置主题。

我现在可以更改 :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>

问题是“header”没有从布局中获取 --bg 变量的值。

希望上面的内容解释了我所追求的。有什么想法可以实现吗?

更新

事实证明,问题是 child Razor 组件中的一个愚蠢的拼写错误!我会把问题留在这里,因为上面的模式是在 Razor 应用程序中提供主题的一种可行方式。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com