How to change default width of sidenav (drawer)

Question

How to customize default width of side-nav? I have tried to change as in the documentation:

mat-drawer {
  width: 200px;
}

but it doesn't work. If I add !important then the expand functionality is not working This is a code

<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>

Thanks in advance!

Answer 1

Seems you missed . syntax of class in css, also try this class in your code -

.mat-sidenav {
  width: 200px;
}

PS: It must be declared in the styles.css in your src folder (Global CSS file)

Answer 2

Try to use this code in the css:

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

Sometimes the component needs a minimun widthm when creating, and if it's expanding it auto-adapts to the width size.

Answer 3

With Angular 13 I added the following style to the stylesheet of the component containing the drawer:

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