如何修改mat-drawer-container背景颜色？Angular侧边栏样式问题

你当前的代码存在两个核心问题，调整后就能实现白色背景：

1. 修复mat-drawer-container的结构 #

Angular Material的mat-drawer-container需要搭配mat-drawer元素才能构成真正的侧边栏，你当前只写了容器框架，缺少实际的侧边栏抽屉组件，灰色大概率是Material组件的默认样式。

修正后的组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  template: `
    <mat-drawer-container class="example-container">
      <!-- 侧边栏抽屉 -->
      <mat-drawer mode="side" opened class="sidebar-drawer">
        <img class="waitwell-logo" src="assets/waitwell.jpg">
        logo
      </mat-drawer>
      <!-- 主内容区域 -->
      <mat-drawer-content>
      </mat-drawer-content>
    </mat-drawer-container>
  `,
  styles: []
})
export class SidebarComponent {

}

2. 让样式正确作用到侧边栏元素 #

原来的样式仅作用于容器，实际需要给mat-drawer设置背景色。修改styles.scss：

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

.example-container {
  height: 100%;
  margin: 0px;
}

.sidebar-drawer {
  background-color: white;
  width: 240px;
  border-right: 1px solid #848383;
}

.waitwell-logo {
  min-height: 60px;
  max-height: 90px;
  max-width: 400px;
}

如果样式仍不生效，可临时提高优先级测试（尽量少用!important，仅作调试）：

.sidebar-drawer {
  background-color: white !important;
  width: 240px;
  border-right: 1px solid #848383;
}

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