Blazor CSS Priority Mixing Up

[mysteryx93]

With Blazor, I'm using Radzen and Bootstrap CSS, plus my own CSS file.

The problem is that the priority order between those files keep shifting depending on how/when the control is displayed. Meaning that it will display fine, I move to another page and come back, and then it displays differently because CSS rules are in a different order. Both Radzen and Bootstrap establish base styles and they override each other.

One issue I had is that a dropdown wasn't displaying its content with the right size in some cases, so I added this in my CSS

.input {
    font-size: 1em;
}

Even there, sometimes the Radzen and/or Bootstrap CSS takes priority over my own! I don't want to put !important here because I might change it for some controls.

How are we supposed to deal with this?

[javiercn]

@mysteryx93 thanks for contacting us.

We're not sure how this is related to Blazor. The order of CSS imports on your index.html file should be "static". It's not clear how you get to import files in different orders (that's the first thing we would recommend you fix).

As for the CSS in Blazor, are you using CSS isolation? If so, it should be fine for you to apply !important since that CSS bit is going to be isolated to the file you are working on.

[mysteryx93]

I'm not sure what's causing this, but I'm importing CSS files normally in the _host.cshtml file. Everything looks fine, I can browse into a new component, come back, browse into another component, and in some corner cases, some components don't appear as expected... sometimes... because of different CSS rule priorities. (I use CTRL+SHIFT+C in Edge to view what CSS rules are applied and in what order)

I don't see anything else to blame than the Blazor rendering engine.

[javiercn]

@mysteryx93 can you provide a minimal repro project that demonstrates the issue and that we can use to help/troubleshoot what might be going on?

If you are importing everything within _Host.cshtml, ASP.NET Core doesn't do anything to alter the order of the elements in your page.

[ghost]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.

[mysteryx93]

Here's a video showing the issue. Pay attention to the dropdown list text alignment on the last page, and I'm showing all the styles applied. Sometimes the text alignment is correct, sometimes it isn't.

BlazorCss.zip