Angular5 mat-menu, модифицирующий атрибуты padding и width?

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;
}

Как можно изменить отступы по умолчанию и ширину mat-menu?

Answer 1

Вы можете добавить следующее в ваш глобальный styles.css

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

Или вы можете использовать ::ng-deep в таблице стилей компонентов

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

Любое из приведенных выше решений позволит вам изменить заполнение по умолчанию для все мат-меню в вашем проекте.

---

Согласно этому SO-ответу, пока не будет предоставлена ​​альтернатива или замена для :: ng-deep, рекомендуется продолжать использовать его ...

Что использовать вместо :: ng-deep

---

Если вы хотите управлять только определенным mat-меню, вам нужно будет использовать свой собственный класс в ваших селекторах CSS

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

---

1024 * Revision *

Чтобы отрегулировать ширину мат-меню без создания полосы прокрутки, вам нужно отрегулировать ширину корневого контейнера cdk-overlay-pane ..., отрегулировав ширину mat-menu-content, который вы делаете, чтобы этот контейнер был шире, чем корневой. контейнер, и поскольку он находится в корневом контейнере cdk-overlay-pane, он создает полосу прокрутки по дизайну. Попробуйте следующее, чтобы расширить мат-меню, не создавая полосу прокрутки.

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