MD -Sidenav-如何更改背景的颜色

Question

我正在尝试更改当您打开Sidenav设置为Over Mode时绘制的背景的颜色。我似乎找不到在哪里更改颜色的地方，也不想要当前设置的非常刺耳的深色。

相关HTML

app.component.html

<md-sidenav-container class="sidenavContainer">
    <md-sidenav id="leftNav" color="primary" #sidenav mode="over" class="left-nav">
        <nav-menu (onSelected)="setTheme($event)"></nav-menu>
    </md-sidenav>
    <div class="main" [class.app-dark-theme]="isDarkTheme" [class.app-candy-theme]="isCandyTheme" [class.app-custom-theme]="isCustomTheme">
        <md-toolbar class="top-nav" color="primary">
            <button md-button (click)="sidenav.toggle()">
                <md-icon>menu</md-icon>
            </button>
            <div id="navBarTitle">Dashboard</div>
            <span class="nav-spacer"></span>
            <div>Signed in as: AdminUser</div>
            <md-icon class="nav-icon">
                <div routerLink="/settings" mdTooltip="Settings">settings</div>
            </md-icon>
            <md-icon class="nav-icon" mdTooltip="Help">help</md-icon>
        </md-toolbar>
        <router-outlet></router-outlet>
    </div>
</md-sidenav-container>

app.component.css

.main {
    position: fixed;
    top: 64px;
    width: 100%;
}
.sidenavContainer {
    height: 100%;
}
.nav-icon {
    padding: 0 15px;
    cursor: pointer;
}
.top-nav {
    height: 64px;
    position: fixed;
    top: 0px;
}
.left-nav {
    height: 100%;
    box-shadow: 1px 0px 2px #c0c0c0;
}

navmenu.component.html

<md-toolbar layout="row" color="primary">
    <h2> 
        <span>Side Panel</span> 
    </h2>
    <span class="nav-spacer"></span>
    <md-button class="close-icon" ng-click=close()>
        <md-icon>close</md-icon>
    </md-button>
</md-toolbar> 
<md-button-toggle-group class="toggle-box" [vertical]="true">
    <md-button-toggle>
        <dash-theme (onSelected)="getTheme($event)"></dash-theme>
    </md-button-toggle>
    <md-button-toggle routerLink="/admin/dashboard">
        Admin Dashboard
    </md-button-toggle>
    <md-button-toggle>
        User Dashboard
    </md-button-toggle>
</md-button-toggle-group>

navmenu.component.css

md-button-toggle-group, md-button-toggle {
    padding: 0px;
    width: 225px; 
}
.sidenav ul a {
    width: 100%;
}
button {
    width: 100%;
}
.close-icon {
    cursor: pointer;
    margin-top: 9px;
}
.nav-spacer {
    flex: 1 1 auto;
}

我可以更改颜色的任何方式都会有所帮助，我认为我只是看不到一些东西，因为这很可能是该组件的非常标准的功能。感谢您阅读

Answer 1

尝试将其放入您的CSS文件：

/deep/ .mat-sidenav-transition .mat-sidenav-backdrop.mat-sidenav-shown {
    background: skyblue;  /* replace skyblue with any color */ 
}

demo

Answer 2

在Angular 11中，如果某人的问题与我相同，请尝试将其放在您的CSS文件中：

::ng-deep .mat-drawer-backdrop.mat-drawer-shown {
    background-color: rgba(53, 53, 53, 0.44);
}