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

Question

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

我正在使用一些CSS来隐藏产品描述的溢出。请看这个堆栈闪电战的当前外观。

所以我正在尝试将面板标题提取到子组件中，并对其应用完全相同的 CSS。但是，CSS 似乎不起作用。请看这个堆叠闪电战。

我在那里做错了什么吗？还是这个角度材料组件的实现方式不应该拆分为不同的组件？

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;
}

查看工作堆栈闪电战