Question

今天我有了这段代码，基本上，当我单击 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的默认填充和宽度？

Answer 1

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

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

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

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

以上两种解决方案均允许您修改以下内容的默认填充：项目中的所有菜单菜单。

按照这个答案，直到为:: ng-deep提供替代或替换之前，建议继续使用...

What to use in place of ::ng-deep

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

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

修订

要在不创建滚动条的情况下调整mat-menu的宽度，您需要通过调整cdk-overlay-pane的宽度来调整根容器mat-menu-content的宽度，您正在制作该容器比根容器更宽，并且由于它位于根容器cdk-overlay-pane中，因此可以通过设计创建滚动条。尝试执行以下操作以扩大mat菜单而不创建滚动条。

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

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

1 个答案: