CSS не применяется, когда mat-extension-panel-header находится в дочернем компоненте

Question

У меня есть компонент, который использует MatExpansionPanel для отображения списка продуктов.

Я использую некоторые CSS, чтобы скрыть переполнение описания продукта.Пожалуйста, смотрите this stackblitz для текущего вида.

Поэтому я пытаюсь извлечь заголовок панели в дочерний компонент и применить тот же самый CSS к нему.Тем не менее, CSS не работает.Пожалуйста, посмотрите этот стек .

Я что-то там не так делаю?Или этот компонент Angular Material реализован таким образом, что его не следует разделять на разные компоненты?

Answer 1

Вы можете заключить ваш product-panel-header.component между div с отображением: flex следующим образом:

html:

<div class="panel-header">
  <mat-panel-title>
    {{product.noProduit}}
  </mat-panel-title>
  <mat-panel-description class="product-name">
    {{product.designation}}
  </mat-panel-description>
  <mat-panel-description>
    {{product.quantite}}(+{{product.supplement}})
  </mat-panel-description>
</div>

css:

.panel-header {
  display: flex;
}

см рабочий стекблиц