Does Blazor Web Assembly work with CSS variables in CSS Isolation files?

Question

Does CSS variables work in a Blazor component with CSS isolation files ?
When my component named Test.razor has no CSS isolation file and has the style set:

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

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

Test is indeed blue.
However if I put the styles in a isolation file name Test.razor.css it does not work.

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

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

The component Test resides in the index page:

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

What am I doing wrong?

Neil W · Accepted Answer · 2021-06-19 10:43:35Z

13

The answer is yes, but not so sure that you can use :root in a css isolation file (the class is no longer called :root in a css isolation file -- it gets a random suffix with css isolation).

My approach has been as follows:

Use a wrapper element to provide a context to assign the css variables to.
Then use the variable in the class you assign to the relevant element.

Test.razor

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

Test.razor.css

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

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

answered Jun 19, 2021 at 10:43

Neil W

9,4555 gold badges37 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Stanley Over a year ago

Having come from c# - Just getting to grips with CSS etc. I thought :root had some special significance. Thanks Neil.

Lucas Over a year ago

You can also add your variables in the app.css (or other global css file that's declared in your index.html) and use them in your razor css files. You won't get the intellisense, but it'll work.

GSerg · Accepted Answer · 2025-08-29 16:06:54Z

1

What I think you're looking for is ::deep.

I found it on https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-9.0

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

edited Aug 29 at 16:06

GSerg

78.8k18 gold badges173 silver badges377 bronze badges

answered Mar 22 at 0:37

MrSethT

636 bronze badges

Collectives™ on Stack Overflow

Does Blazor Web Assembly work with CSS variables in CSS Isolation files?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related