调整mat-side-nav打开时的宽度

Question

单击导航栏时，导航栏的宽度将随内容自动调整。

 <mat-sidenav #sidenav  mode="side" class="primary-color main-sidenav nav- 
 shadow" opened="true" [@sidenavState]="sidenavState" 
 (@sidenavState.done)="endAnimation()" *ngIf="layout === 'modern' || 
 forceModern">
 ....
 </mat-sidenav>

当我在SCSS中将side-nav的宽度设置为

.mat-side-nav{
   width: auto !important
 }

默认情况下，导航栏是打开的，无需单击即可打开。点击也不关闭

Answer 1

您的问题： 当您执行以下操作时： .mat-side-nav {    宽度：自动！重要  }

这是一种对宽度进行硬编码以使其包含任何内容的方法。

解决方案： 找到打开时处于活动状态的类，并为其设置宽度：auto。