Blazor Web Assembly 是否使用 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);
}

组件测试驻留在索引页中：

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

我做错了什么？

Answer 1

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

我的做法如下：

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

Test.razor

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

Test.razor.css

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

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