如何将mat-expansion-panel描述文本右对齐？text-align设置无效

嘿，我之前也碰到过这个问题！Angular Material的组件自带视图封装机制，直接用mat-panel-description选择器写样式经常穿透不进去，导致text-align: right没效果。试试下面几种可行的解决方案：

方法一：使用::ng-deep穿透样式 #

这是最直接的方式，它能打破组件的视图封装，让你的样式作用到Angular Material组件内部：

::ng-deep .custom-panel mat-panel-description {
  text-align: right;
}

然后给你的扩展面板加个自定义类，避免影响其他组件：

<mat-expansion-panel class="custom-panel">
  <mat-expansion-panel-header>
    <mat-panel-title> Cycle ingénieur en informatique </mat-panel-title>
    <mat-panel-description> 2014-2017 </mat-panel-description>
  </mat-expansion-panel-header>
  <!-- 面板内容 -->
</mat-expansion-panel>

方法二：关闭组件的视图封装 #

如果你不想用::ng-deep，可以关闭当前组件的视图封装，但要注意这样组件内的样式会全局生效，所以最好用类名限定范围：
首先在组件的TS文件里导入ViewEncapsulation并配置：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent {
  // 组件逻辑
}

然后在CSS里用类限定样式：

.custom-panel mat-panel-description {
  text-align: right;
}

HTML部分同样给mat-expansion-panel加上custom-panel类就行。

方法三：在全局样式文件中设置 #

把样式写到项目的全局样式文件（比如styles.css）里，这样样式会全局生效，如果只想针对特定面板，还是要加类限定：

.custom-panel mat-panel-description {
  text-align: right;
}

HTML部分同上，给目标面板加类。

个人更推荐第一种方法，既能快速生效，又能通过类名避免样式污染其他组件~

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