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屋！