如何移除Angular mat-drawer自动添加的mat-drawer-inner-container滚动条

针对你遇到的Mat-Drawer自动生成的.mat-drawer-inner-container出现无效滚动条的问题，给你几个可行的解决思路：

方案1：用::ng-deep穿透样式隔离 #

Angular默认的组件样式封装会阻止父组件样式作用到第三方组件内部元素，::ng-deep可以打破这个限制。在父组件的CSS文件中添加：

::ng-deep .mat-drawer .mat-drawer-inner-container {
  overflow-y: hidden !important;
}

注意：虽然::ng-deep目前被标记为deprecated，但在Angular项目中依然可以正常使用，适合快速解决问题。

方案2：关闭父组件的样式封装 #

通过关闭父组件的样式封装，让组件CSS成为全局样式，从而能直接选中Mat-Drawer内部的容器元素：

1. 在父组件的TS文件中引入ViewEncapsulation并修改组件配置：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-parent-comp',
  templateUrl: './your-parent-comp.component.html',
  styleUrls: ['./your-parent-comp.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourParentCompComponent {
  // 组件逻辑
}

2. 为了避免影响全局所有Mat-Drawer，给目标Mat-Drawer加一个自定义类：

<mat-drawer class="custom-drawer">
  <app-your-table-component></app-your-table-component>
</mat-drawer>

3. 在父组件CSS中精准定位：

.custom-drawer .mat-drawer-inner-container {
  overflow-y: hidden;
}

方案3：调整布局高度匹配 #

如果自定义表格已经有虚拟滚动条，确保Mat-Drawer和内部组件的高度完全匹配，避免内部容器因高度计算偏差触发滚动：

• 给Mat-Drawer设置高度为100%：

<mat-drawer style="height: 100%;">
  <app-your-table-component></app-your-table-component>
</mat-drawer>

• 同时确保自定义表格组件的根元素和table都设置了正确的高度（比如height: 100%;），让内容高度完全填充Mat-Drawer，不给内部容器触发滚动的机会。

为什么之前的方法无效？ #

• 父组件直接选中.mat-drawer .mat-drawer-inner-container：Angular样式封装会自动给样式加前缀，无法匹配到Mat-Drawer内部的元素
• 自定义组件用:host：:host只能选中组件自身的宿主元素，无法作用到外部的Mat-Drawer容器
• 内联样式：.mat-drawer-inner-container是Angular Material自动生成的元素，无法直接给它加内联样式

内容的提问来源于stack exchange，提问作者Dynocoder