Изменение стилей углового материала mat-dialog-content

Question

В угловых диалоговых окнах вы можете добавить <mat-dialog-content>, но есть ли способ стилизовать это?

Я пытался:

.mat-dialog-content {
    padding: 10px;
}

Но, похоже, это не работает.Хотя эти два прекрасно работают:

.mat-dialog-container {
    padding: 0px !important;
}

.mat-dialog-title {
    color: white;
    background-color: #F48043;
    text-align: center;
    width: 100%;
    font-size: 20px;
    padding: 20px 0px !important;
}

Есть идеи, как получить доступ к стилям этого <mat-dialog-content>?

Answer 1

Существует официальное руководство, как это сделать: https://material.angular.io/guide/customizing-component-styles Например,

Например, чтобы удалить заполнение из диалогового окна:

// Add this to your global stylesheet after your theme setup
.myapp-no-padding-dialog .mat-dialog-container {   
  padding: 0;
}

this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})

Поскольку вы добавляете стили в свою глобальную таблицу стилей, хорошей практикой является их соответствующая область.Попробуйте добавить префикс к вашему имени приложения или «custom».Также обратите внимание, что отступы mat-dialog-container добавляются по умолчанию с помощью селектора со спецификой 1. Стили настройки имеют специфику 2, поэтому они всегда будут иметь приоритет.

Answer 2

Использование CSS в style.css или любом глобальном файле CSS.

Вы должны объявить это как важное, иначе стиль материала будет переопределять его.

.mat-dialog-content {
    padding: 10px !important;
}

Answer 3

Если вы пытаетесь стилизовать это из файла css вашего компонента, это потому, что mat-dialog-content не содержится в инкапсуляции хоста вашего компонента .

Вы можете использовать :: ng-deep в классе, чтобы пробить инкапсуляцию и стилизовать элемент изнутри вашего компонента.По-видимому, это текущее решение команды Angular.

::ng-deep .mat-dialog-content {
    padding: 10px !important;
}

Кроме того, оно будет предназначаться только для элемента.После этого будут применяться правила специфичности css, поэтому вам также потребуется добавить ! Важный или создать правило, которое является более конкретным , чтобы переопределить стандартное значение материала.

Answer 4

Похоже, <mat-dialog-content> является элементом, вы пробовали следующее:

mat-dialog-content {
    padding: 10px;
}