当mat-expansion-panel-header位于子组件中时，CSS不适用

Question

我有一个使用MatExpansionPanel来显示产品列表的组件。

我正在使用一些CSS隐藏产品说明的上溢。请查看this stackblitz以了解当前的外观。

因此，我试图将面板标题提取到子组件中，并对其应用完全相同的CSS。但是，CSS似乎无法正常工作。请参阅this stackblitz。

我在那里做错了吗？还是该Angular Material组件以一种不应拆分为不同组件的方式实现？

Answer 1

您可以将display-flex的product-panel-header.component包裹在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>

css：

.panel-header {
  display: flex;
}

请参阅working stackblitz