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

【问题标题】：Angular5 mat-menu modifying padding and width attributes?Angular5 mat-menu 修改填充和宽度属性？
【发布时间】：2019-04-21 23:36:56
【问题描述】：

今天我有这段代码，基本上当我点击 Details 按钮时，它会打开一个 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;
}

有哪些方法可以更改mat-menu 的默认填充和宽度？

【问题讨论】：

确保在全局样式表中定义了“filesList”类。
假设我有 myComponent.ts 和 myComponent.html 和 myComponent.css，在 myComponent.css 文件中有 'filesList' 还不够吗？（当然在 .ts 我有 styleUrls: ['myComponent.css'] ）
是的——我就是这么说的——确保你的类是在全局样式表中定义的。覆盖容器（菜单、对话框等）位于组件的 DOM 之外，因此不会应用组件的样式。
哦，好吧，我以为你的意思是style.css，我会尝试直接在里面添加样式。
添加没有成功

标签： html css angular typescript angular-material

【解决方案1】：

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

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

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

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

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

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

What to use in place of ::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;
}

【讨论】：

而且它的宽度也很好，但是即使溢出也总是有一个X滚动条：隐藏！重要；有没有办法隐藏滚动直到它达到我设置的宽度？
我试过这个宽度为 600px : ::ng-deep .listFiles .mat-menu-panel { max-width: 600px !important; } 但它不会改变 max-width 参数。
请参阅关于在不创建滚动条的情况下在根容器上将最小宽度调整为 600 像素的修订版。