css - 在打开时调整 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 中将侧边导航的宽度设置为

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

导航栏默认打开，无需点击打开。它也没有通过点击关闭

Answer 1

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

这是一种硬编码宽度以获取它包含的任何内容。

解决方法: 找到打开时处于事件状态的类，并为该类设置宽度:自动。