Blazor Web 程序集是否适用于 CSS 隔离文件中的 CSS 变量？

Question

CSS 变量是否可以在带有 CSS 隔离文件的 Blazor 组件中使用？ 当我的名为 Test.razor 的组件没有 CSS 隔离文件并且设置了样式时：

<h1 class="mh1">Test</h1>
<style>
    :root {
        --mblue:#0000ff;
    }

    .mh1{
        color:var(--mblue);
    }
</style>

测试确实是蓝色的。 但是，如果我将样式放在隔离文件名 Test.razor.css 中，它将不起作用。

:root {
    --mblue: #0000ff;
}

.mh1 {
    color: var(--mblue);
}

组件Test驻留在索引页面中：

@page "/"
<Test></Test>

我做错了什么？

Answer 1

答案是肯定的，但不太确定是否可以在 css 隔离文件中使用 :root （在 css 隔离文件中，该类不再称为 :root ——它得到一个带有 css 隔离的随机后缀）。

我的方法如下：

1. 使用包装器元素提供上下文以将 css 变量分配给。
2. 然后使用您分配给相关元素的类中的变量。

Test.razor

<div class="test-wrapper">
    <h1 class="mh1">Text</h1>
</div>

Test.razor.css

.test-wrapper {
    --mblue: #0000ff;
}

.mh1 {
    color: var(--mblue);
}