Blazorise components don't work with CSS Isolation

[john-cullen]

Not sure if this is something you can fix or not, but Blazorise components don't get scope attributes added so CSS Isolation doesn't work.

• Create a page, e.g. Test.razor, add a Blazorise component and a plain HTML element.
• Add a Test.razor.css file, and reference <Root namespace>.styles.css in your index.html as described here
• Add a class to the .css file with background-color: red; or something else obvious, add the class to your blazorise component and the html element.
• Run the project and open the page
• The class has not been applied to the component, only the element.

[stsrki]

I tried it and you're right, it's not working. The reason I suspect is that Blazor does not generate a special attribute with a random ID for custom components.

I will try to investigate more but for now, it's low on a priority list. Maybe for the next mileston.

[gerfen]

If you wrap your pages/components in a <div/> and use deep:: in your css/scss, then css isolation mostly works.

[WAELKASSEM]

If you wrap your pages/components in a <div/> and use deep:: in your css/scss, then css isolation mostly works.

Here's how you do it.

::deep .myclass {
    color: red;
}

The Div is very Important