Blazor Webassembly:CSS:未应用主机变量 [英] Blazor Webassembly: CSS :host variables not applied
问题描述
我正在为 Blazor Webassembly 组件设计布局.(=胖浏览器客户端,无服务器渲染)
布局如下所示,按预期工作:
.grid{最小高度:100vh;最小宽度:100vw;高度:100vh;宽度:100vw;背景颜色:黑色;显示:网格;网格模板行:10px 5vh calc(90vh - 20px) 5vh 10px;网格模板列:10px 3vw calc(94vw - 20px) 3vw 10px;/* Blazor 特别*/边距:-8px;}
.gridCellLogo{网格列开始:2;网格列端:2;网格行开始:2;网格行端:2;背景颜色:红色;}
<div class="gridCellLogo">@*把你的组件放在这里*@
但是,如果我使用 CSS 变量,则不会应用它们.看 --somecolor
:host{--somecolor:绿色;}.网格 {最小高度:100vh;最小宽度:100vw;高度:100vh;宽度:100vw;背景色:var(--somecolor);显示:网格;网格模板行:10px 5vh calc(90vh - 20px) 5vh 10px;网格模板列:10px 3vw calc(94vw - 20px) 3vw 10px;/* Blazor 特别*/边距:-8px;}
我的问题:
是我的 CSS 错误还是 Blazor Webassembly 尚未准备好使用 CSS 变量?
你在使用 Blazor CSS Isolation 吗?例如,MyComponent.razor.css
?如果是这样,CSS Isolation 不支持伪类、变量或任何以 单 冒号 :
开头的 CSS.
您需要在未编译的 CSS 文件中声明这些变量,例如 wwwroot/css
下的 app.css
.
I am working on a layout for a Blazor Webassembly component. (=Fat browser client, no server rendering)
The layout looks like this and works as expected:
.grid
{
min-height: 100vh;
min-width: 100vw;
height: 100vh;
width: 100vw;
background-color: black;
display: grid;
grid-template-rows: 10px 5vh calc(90vh - 20px) 5vh 10px;
grid-template-columns: 10px 3vw calc(94vw - 20px) 3vw 10px;
/*Blazor Special*/
margin: -8px;
}
.gridCellLogo
{
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 2;
background-color: red;
}
<div class="grid">
<div class="gridCellLogo">
@*Put your component here*@
</div>
</div>
However, if I use CSS variables, they are not applied. Look at --somecolor
:host
{
--somecolor: green;
}
.grid {
min-height: 100vh;
min-width: 100vw;
height: 100vh;
width: 100vw;
background-color: var(--somecolor);
display: grid;
grid-template-rows: 10px 5vh calc(90vh - 20px) 5vh 10px;
grid-template-columns: 10px 3vw calc(94vw - 20px) 3vw 10px;
/*Blazor Special*/
margin: -8px;
}
My question:
Is my CSS wrong or is Blazor Webassembly not ready for CSS variables yet?
Are you using Blazor CSS Isolation? E.g., MyComponent.razor.css
? If so, CSS Isolation does not support pseudo classes, variables, or any CSS that starts with a single colon :
.
You will need to declare these variables in a non-compiled CSS file like the app.css
under wwwroot/css
.
这篇关于Blazor Webassembly:CSS:未应用主机变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!