转到styles.scss文件，然后添加以下内容：

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

并且添设了

panelClass: 'custom-dialog-container'

作为要发送到dialogComponent的MatDialogRef对象的一部分

在对话框组件的样式中：

/deep/ .mat-dialog-content {
    overflow-y: hidden !important;
}

这是我的实现。在TrendDialogComponent的父组件中

const dialogRef = this.trendDialog.open(TrendDialogComponent, {
                    autoFocus: false,
                    panelClass: 'trend-dialog',
                    width: '1360px', height: '680px',
                    data: {tagsTrend: this.tagNames}
                  });

并将此css添加到style.css

.trend-dialog .mat-dialog-container{
    overflow-y: hidden !important;
}

在对话框组件的样式中，可以使用

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

当我的html包含mat-dialog-content时，我遇到了同样的问题

<div mat-dialog-content>
    <mat-form-field>
        ....
    </mat-form-field>
</div>

然后我改口道：

<div>
    <mat-form-field>
        ....
    </mat-form-field>
</div>

并从对话框中删除垂直滚动条。

如果你的对话框延伸到整个页面，而右边的滚动条没有消失，我会建议这个选项。

.cdk-global-scrollblock {
    overflow-y: hidden;
}

这对我很有效。

::ng-deep .mat-dialog-container {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.mat-dialog-content {
  background-color: #eff2f5;
  display: block;
  margin: 0 -24px;
  padding: 0 24px;
  max-height: 109vh;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

您可以通过MatDialogConfig的id设置组件的css id

let config: MatDialogConfig<BigImgData> = {
    scrollStrategy: this.overlay.scrollStrategies.block(),
    id: 'bigImgComp',
};
this.dialogRef = this.dialog.open(BigImgComponent, config);

然后在src\styles.css中设置id的css

#bigImgComp {
  overflow: hidden; /* Hide scrollbars */
}