Question

如何自定义side-nav的默认宽度？我试图按照文档中的内容进行更改：

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中类的$(document).ready(function() { $(".dropdown").hover( function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("100"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("100"); $(this).toggleClass('open'); } ); });语法，也请在您的代码中尝试该类-

PS：必须在src文件夹（全局CSS文件）的styles.css中声明它

Answer 2

尝试在CSS中使用此代码：

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

有时候，组件在创建时需要最小的widthm，如果正在扩展，它会自动适应宽度大小。

如何更改sidenav（抽屉）的默认宽度

2 个答案: