Angular Material展开面板标题数字右对齐问题求助

我刚上手Angular Material时也踩过类似的样式优先级坑，你的思路方向是对的，但因为Material内置样式的权重更高，导致自定义样式没生效。咱们来一步步调整解决：

问题根源 #

Angular Material的mat-expansion-panel-header默认采用Flex布局，内置的.mat-expansion-panel-header-description已经有默认的flex属性配置，你的自定义样式优先级不够，被默认样式覆盖了。另外，仅给.summary加text-align: right还不够，需要确保描述区域能占据头部的剩余空间，才能把内容推到最右侧。

有效解决方案 #

推荐两种可行的实现方式：

方式1：提升自定义样式优先级（更规范） #

在组件CSS中使用更具体的选择器，确保能覆盖Material的默认样式：

/* 让描述区域占满头部剩余空间，并将内容右对齐 */
.mat-expansion-panel-header .mat-expansion-panel-header-description.summary {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

这里通过嵌套选择器提升了样式优先级，flex-grow:1让描述区域占据头部所有剩余空间，再用justify-content: flex-end把数字推到最右侧，align-items: center保证数字和标题垂直居中对齐。

方式2：使用::ng-deep穿透样式（适合开启ViewEncapsulation的场景） #

如果你的组件默认启用了ViewEncapsulation，自定义样式无法渗透到Material组件内部，可以用::ng-deep（虽然Angular官方不推荐滥用，但在样式覆盖场景下很实用）：

::ng-deep .mat-expansion-panel-header-description.summary {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

调整后的完整代码示例 #

你的HTML结构可以保持不变，只需要更新CSS部分：

HTML代码

<mat-expansion-panel class="mat-header" hideToggle *ngFor="let key of itemCategories">
 <mat-expansion-panel-header class="panel-header">
  <mat-panel-title> {{key}} </mat-panel-title>
  <mat-panel-description class="summary">
   <div *ngIf="items[key].length > 0"> {{items[key].length}} </div>
  </mat-panel-description>
 </mat-expansion-panel-header>
 <div class="panel-content" *ngIf="items[key].length > 0">
  <ng-container *ngFor="let item of items[key]">
   <div> Name: {{item?.name}} <br> Betrag: {{item?.price}} <hr> </div>
  </ng-container>
 </div>
</mat-expansion-panel>

CSS代码（推荐方式1）

.mat-expansion-panel-header .mat-expansion-panel-header-description.summary {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

为什么之前的样式没生效？ #

• 你之前设置的.mat-expansion-panel-header-description { flex-grow: 2; }，因为选择器优先级和Material默认样式相同，默认样式会覆盖自定义样式；
• text-align: end仅对有足够宽度的块级元素生效，如果描述区域本身没有占据剩余空间，即便设置了对齐也看不到效果，所以flex-grow:1是关键。

内容的提问来源于stack exchange，提问作者skdadle