如何更改sidenav（抽屜）的默認寬度

Question

如何自定義側導航的默認寬度？ 我試圖按照文檔中的方式進行更改：

mat-drawer {
  width: 200px;
}

但它不起作用。 如果我添加 !important 則擴展功能不起作用這是一個代碼

<mat-drawer-container class="example-container" fullscreen autosize>
  <mat-drawer [@openClose]="menuState == 1 ? 'open':'close'" class="example-sidenav" mode="side" opened>
    <app-menu-top></app-menu-top>
    <app-side-menu-links></app-side-menu-links>
  </mat-drawer>

  <div class="example-sidenav-content">
    <app-header [configData]="configData" (onSearchButtonClick)="searchButtonClick($event)"></app-header>
      <ng-content></ng-content>
    </div>
</mat-drawer-container>

提前致謝！

Answer 1

似乎您錯過了. CSS中類的語法，也可以在您的代碼中嘗試此類-

.mat-sidenav {
  width: 200px;
}

PS：必須在src文件夾（全局CSS文件）的styles.css中聲明它

Answer 2

嘗試在CSS中使用以下代碼：

.mat-sidenav {
min-width: 200px }

有時，組件在創建時需要最小的widthm，如果擴展，它會自動適應寬度大小。

Answer 3

使用 Angular 13 我將以下樣式添加到包含抽屜的組件的樣式表中：

.mat-drawer.mat-drawer-side {
    width: 200px;
}