blazorblazor-server-sidemudblazor

MudBlazor custom css

Why is css not working in MudBlazor?

When I create a server side rendering MudBlazor app from scratch using the Visual Studio MudBlazor project template and I add some custom css styles they wont apply.

The only way to get custom css working is to add them to style attribute.

Is there any way to get this working anyway? Because its getting to its limit if you want to add some more complex css with animations...

CODE

App.razor

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    
    
    <link rel="stylesheet" href="MudBlazorCssTest.styles.css" />
    <HeadOutlet @rendermode="@InteractiveServer" />
</head>

<body>
    <Routes @rendermode="@InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>

</html>

wwwroot/app.css

.test ::deep {
    background-color: red !important;
}

Home.razor

@page "/"

<div class="test">
    <div>This is not red</div>
</div>
<div style="background-color: red">
    <div>This is red</div>
</div>
Solution

  • It should be ::deep .test ? And I see the warning in test:

    enter image description here

    So if you want to use css globally you could create "App.razor.css"
    enter image description here

    ::deep .test {
    background-color: red !important;
}

    For ::deep to work you could wrap the element which has "class" with test using another "<div>".

    <div >
    <div class="test">
        <div>This is not red</div>
    </div>
</div>

    Test result
    enter image description here