文章/答案/技术大牛

发布

社区首页 >问答首页 >Blazor组件: CSS :未应用主机变量

问Blazor组件: CSS :未应用主机变量
EN

Stack Overflow用户

提问于 2021-01-31 11:57:22

回答 2查看 735关注 0票数 1

我正在为一个Blazor组件组件进行布局。(=Fat浏览器客户端，没有服务器呈现)

布局如下所示，按预期的方式工作，

.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>

但是，如果我使用CSS变量，就不会应用它们。看看--

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

我的问题是：

是我的CSS错了还是Blazor组件还没有为CSS变量做好准备？

css

variables

blazor

host

回答 2

Stack Overflow用户

发布于 2021-03-18 00:34:02

您是在使用Blazor CSS隔离吗？例如，MyComponent.razor.css？如果是这样的话，CSS隔离不支持伪类、变量或以单个冒号:开头的任何CSS。

您需要在一个非编译的CSS文件中声明这些变量，比如app.css在wwwroot/css下。

票数 3

Stack Overflow用户

发布于 2021-03-18 05:52:23

Blazor隔离不使用影子DOM，因此:host选择器不可用。您可以在:root选择器上定义变量，然后在特定的css类上使用自定义值覆盖它，如下所示

<div class="grid my-warpper-class">
    <div class="gridCellLogo">
        @*Put your component here*@
    </div>
</div>

:root
{
  --somecolor: red;
}

.my-wrapper-class
{
  --somecolor: green;
  /* blue here is a fallback in case --somecolor didn't exist */
  background-color: var(--somecolor, blue);
}

.gridCellLogo {
  background-color: var(--somecolor, green);
}

在--somecolor上定义:root变量将使它在任何地方都可用，这时您可以在任何其他类(如my-wrapper-class )中覆盖它

在这种情况下，包装类和gridCellLogo将有不同的背景色。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65978818

复制

相似问题

问Blazor组件: CSS :未应用主机变量
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Blazor组件: CSS :未应用主机变量EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Blazor组件: CSS :未应用主机变量
EN