MudBlazor SSR应用自定义CSS不生效问题求助

我使用Visual Studio的MudBlazor项目模板从零创建了一个服务器端渲染（SSR）MudBlazor应用，添加自定义CSS样式后无法生效。目前仅能通过style属性实现自定义样式，但这对于包含动画的复杂CSS来说局限性很大，请问是否有解决办法？

代码 #

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>

解决办法 #

1. 修正全局样式的写法 #

你的wwwroot/app.css是全局样式文件，不需要使用::deep（::deep仅用于组件隔离CSS文件中穿透子组件的场景）。根据需求修改样式：

• 若要让.test本身背景变红：

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

• 若要让.test内部的所有div背景变红：

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

2. 确保全局样式文件被正确引用 #

当前你的App.razor中只引用了CSS隔离生成的MudBlazorCssTest.styles.css，缺少全局样式app.css的引用。在<HeadOutlet>之前添加：

<link rel="stylesheet" href="app.css" />

3. 针对MudBlazor组件的样式穿透（后续扩展使用） #

如果需要修改MudBlazor内置组件的样式，比如MudButton，可以在组件的隔离CSS文件（如Home.razor.css）中使用::deep突破作用域：

::deep .mud-button {
    background-color: red;
}

原因说明 #

Blazor SSR中，wwwroot下的全局样式文件直接作用于整个应用，无需特殊穿透语法；而组件的隔离CSS文件（如xxx.razor.css）会自动添加作用域前缀，此时需要用::deep来突破作用域，影响子组件或嵌套元素。你之前的错误在于给全局样式添加了::deep，导致选择器失效。

内容的提问来源于stack exchange，提问作者CrazyEight