Angular5 mat-menu 修改填充和宽度属性？

Question

今天我有这个代码，基本上当我点击详细信息按钮时，它会打开一个mat-menu但不知何故我无法修改菜单的填充或宽度值：

<div id="box-upload" [hidden]="hiddenBoxUpload" *ngIf="filesExist">
    <button mat-raised-button color="primary" [matMenuTriggerFor]="listFiles">Details</button>
    <mat-menu class="filesList" #listFiles="matMenu">
        <div *ngFor="let key of listkey">
            <div *ngIf="detailsExist">
                <!-- some stuff like mat-progress-bar and span>
            </div>  
        </div>
    </mat-menu>
</div>

css代码：

.filesList {
   width: auto;
   padding: 15px;
}

更改 a 的默认填充和宽度的方法是mat-menu什么？

Answer 1

您可以将以下内容放入您的全局 styles.css

.mat-menu-content {
    padding: 30px;
}

或者您可以::ng-deep在组件样式表中使用

::ng-deep .mat-menu-content {
    padding: 30px;
}

上述任一解决方案都允许您修改项目中所有 mat-menu 的默认填充。

根据这个 SO 答案，在为 ::ng-deep 提供替代或替代品之前，建议继续使用它...

用什么代替 ::ng-deep

如果您只想控制特定的 mat-menu，则需要在 CSS 选择器中使用自定义类

::ng-deep .filesList .mat-menu-content{
    padding: 30px;
}

修订

要在不创建滚动条的情况下调整 mat-menu 的宽度，您需要调整根容器cdk-overlay-pane的宽度...通过调整宽度mat-menu-content使该容器比根容器更宽，因为它在根内容器cdk-overlay-pane它按设计创建了一个滚动条。尝试以下操作来加宽 mat-menu 而不创建滚动条。

::ng-deep .cdk-overlay-pane .filesList{
    min-width:600px;
}