Угловой материал мат-расширительная панель-стиль кузова не применяется

Question

У меня есть следующий css в файле css моего компонента:

.mat-expansion-panel-body {
  padding: 0;
}

И, таким образом, я ожидаю увидеть это правило (даже если оно переопределено), которое будет отображаться для следующего элемента dom:

<div class="mat-expansion-panel-body">...</div>

Но все, что я вижу в инструментах разработчика, это:

.mat-expansion-panel-body {
  padding: 0 24px 16px;
}

Я заметил, что у этого элемента нет класса _ngcontent-c19 , который есть у других элементов host , и поэтому я предполагаю, что это случай Посмотреть инкапсуляцию.

Однако, после прочтения с устаревшими :: ng-deep и / deep / и другими конструкциями прокалывания инкапсуляции, которые должны быть признаны устаревшими, каково лучшее решение для стилизации этого элемента из файла css моего компонента?

Answer 1

Я установил ::ng-deep в компоненте css, он работал на моей стороне.

::ng-deep .mat-expansion-panel-body{
     padding: 0;
}

Answer 2

Одним из возможных решений, если вы не хотите использовать :: ng-deep, является установка стиля в вашем файле styles.css следующим образом.

.mat-expansion-panel-body {
  padding: 0 !important;
}

Это удалит заполнение, но будьте осторожны, так как оно удалит его из всех элементов корпуса mat-extension-panel-body. Вы можете обойти это, установив определенный класс на панель расширения, а затем сделав что-то подобное в styles.css

.my-special-class .mat-expansion-panel-body {
  padding: 0;
}

В этом случае вам даже не нужно! Важно. Вот пример этого.

https://stackblitz.com/edit/angular-a6necw