MD-Sidenav - 如何改变背景的颜色？

Question

我正在尝试更改打开sidenav设置为Over模式时绘制的背景颜色。我似乎无法找到改变颜色的位置，也不想要它目前设置的非常刺眼的深色。

相关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);
}