Blazor页面无法修改背景色，如何覆盖Bootstrap样式？

• 确保CSS加载顺序：在项目入口文件（WebAssembly为wwwroot/index.html，Server为Pages/_Layout.cshtml）中，将自定义CSS引用放在Bootstrap的<link>标签之后，保证自定义样式加载优先级高于Bootstrap。

• 使用更具体的选择器：
  避免仅用body选择器，改用Blazor应用根容器或布局组件的自定义类：

  1. 在TestLayout.razor中给根容器添加类：

     <div class="test-layout-container">
         @Body
     </div>
     

  2. 在关联CSS文件中设置样式：

     .test-layout-container {
         background-color: yellow;
         min-height: 100vh; /* 确保背景色覆盖整个视口高度 */
     }
     

  或者直接针对Blazor默认根容器#app：

  #app {
      background-color: yellow;
      min-height: 100vh;
  }
  

• 处理组件级CSS的作用域问题：如果CSS是组件专属文件（如TestLayout.razor.css），Blazor会自动添加作用域前缀，导致body选择器失效。此时用::deep伪类穿透作用域：

  ::deep body {
      background-color: yellow;
  }
  

  也可将样式移到全局CSS文件（如wwwroot/css/site.css），避免作用域限制。

• 确保元素高度覆盖视口：若body默认高度不足，背景色无法完整显示，添加以下样式：

  html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: yellow;
  }
  

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