Styling order when there is a theme?

[sturlath]

I commented on this issue where adding Shadow="Shadow.None" to a Card in abp.io doesn't take affect.

Is that just how it is supposed to work? I would think adding Shadow="Shadow.None" right onto the component would override all others styles but is the theme applied last?

[stsrki]

Yes, whatever CSS is defined last will override any previous rule. Or if there is any more specific selector it can also affect any other rule. That is how CSS works, and why it has cascaded in its name. One possible solution would be to have !important for all utilities, but in that case, it would be even harder to maintain or override any theme by the users.

My advice is to see what exactly is winning on the ABP theme and then try to create a CSS selector that would be much more specific to override it.

[sturlath]

Ok so the theme is applied last. But what about CSS isolation (example.razor.css) ? Would that be applied last?

having it contain something like this

.card {
  box-shodow: 0px !important;
}

I'll try this out in few

[stsrki]

As far as I know, CSS isolation doesn't work with any Blazor component. Only for the native HTML elements. This is not just a Blazorise limitation but for any other component library. The reason is that Blazor must generate inline styles on compile-time, and component libraries are already compiled.

[sturlath]

This is quite limiting actually… it means that the theme always wins and I can’t take advantage of Blazor (or any other) helpers when the theme has the overhand.. and me being rubish in CSS it will always be a struggle 😩 just things like where should I add this CSS just to start with…and that after I figure out the code it self 🙈

I acknowledge that this is a Blazor limitation and not just a Blazorise one, but this is something I would expect to be commonly solved and easially applied but I guess not…

[stsrki]

It shouldn't need to be that hard. Just a little more code than usual. You can start by adding a custom class name to the Card.

<Card Class="my-custom-card">

and then some CSS

.card.my-custom-card
{
  box-shadow: 0px !important;
}

[sturlath]

Ok ok maby thats not that so hard 😄 I’ll try this approach (with the CSS in a script tag on the page I guess!)

thanks for the assist as always! ❤️

[sturlath]

Just to emphasize on thing for others later... this only works by using on page <style></style>.
I can´t put any CSS in a *.blazor.css isolation file and get it to override anything (all elements have apb.io theming styles)

I really don´t understand the CSS isolation if that doesn´t work... and sorry I know that's not your problem..

For completeness sake here is my question on the abp.io side.

[stsrki]

CSS isolation, cannot work for the Blazor component because on compile-time Blazor needs to generate a special ID on the HTML element that looks like <h1 b-3xxtam6d07>. You can see it on https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0

You could make it work by wrapping the component with the div element but that to me sounds like too much noise. It is explained here https://docs.telerik.com/blazor-ui/knowledge-base/common-css-isolation