当mat扩展面板标题位于子组件中时，CSS不应用

我有一个组件，它使用MateExpansionPanel显示产品列表

我正在使用一些CSS来隐藏产品描述的溢出。请参阅以获取当前外观

因此，我试图将面板标题提取到子组件中，并对其应用完全相同的CSS。然而，CSS似乎不起作用。请看

---

我做错什么了吗？或者，该角材质组件的实现方式不应拆分为不同的组件？

您可以将product-panel-header.component包装在带有display:flex的div之间，如下所示：

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>

.panel-header {
  display: flex;
}