Search code examples
cssblazormudblazor

How to add razor isolated/code behind CSS classes in MudBlazor components?

in my codebehind file I have defined a css class. This is pulled when I use the "class" attribute on normal HTML elements (in the example: ). However, if the class sits on a MudElement ("Class"), the change is not pulled. The class name is set, but the style is not applied.

What's the problem?

MainLayout.razor:

<MudContainer Class="redBorder">
    <span class="redBorder">
        @Body
    </span>
</MudContainer>

MainLayout.razor.css:

.redBorder {
    border: 1px solid red;
}
Solution

  • Doesn't work with razor isolated css, the razor isolated/code behind css adds an id to each class when compiled and linking doesn't seem to work.

    You can create a separate css file and save it in your wwwroot/css folder (don't forget to add a link to that file in your index.html file.) Then the classes there can be applied on top of the MudBlazor components Class property.