当 mat-expansion-panel-header 在子组件中时 CSS 不适用

Question

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

我正在使用一些 CSS 来隐藏产品描述的溢出。请参阅 this stackblitz对于当前的外观。

所以我试图将面板标题提取到子组件中，并对其应用完全相同的 CSS。但是，CSS 似乎不起作用。请参阅 this stackblitz .

我是不是做错了什么？还是这个 Angular Material 组件的实现方式不应该拆分成不同的组件？

Answer 1

您可以将 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>

CSS:

.panel-header {
  display: flex;
}

参见 working stackblitz