1. ホーム
  2. javascript

[解決済み] Angularマテリアルのmat-expansion-panelのコンテンツを中央に配置する。

2022-02-07 16:28:28

質問

アンギュラー素材の拡張パネルのコンテンツを中央に配置しようとしています。最初はコンテンツをdivで囲み、align-content: center と align-items: centerでスタイル付けをしようとしました。しかし、それはうまくいかないようです。コンテンツは左側に固定されているようです。私の推測は、私が!importantでスタイルをオーバーライドする必要があるいくつかのangular materialクラスがあることです。しかし、私はそれがわからない。

.centered-content{
  align-content: center
  align-content: center
}
<mat-accordion>
  <!-- #docregion basic-panel -->
  <!-- #docregion hide-toggle -->
  <mat-expansion-panel hideToggle>
    <!-- #enddocregion hide-toggle -->
    <mat-expansion-panel-header>
      <mat-panel-title>
        This is the expansion title
      </mat-panel-title>
      <mat-panel-description>
        This is a summary of the content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <div class="centered-content">
      <p>This is the primary content of the panel.</p>
    </div>
  </mat-expansion-panel>
  <!-- #enddocregion basic-panel -->


</mat-accordion>

解決方法は?

をオーバーライドする必要があります。 mat-expansion-panel-body クラスがあります。で行う必要があります。 ::ng-deep 擬似クラスのため ビューカプセル化 :

::ng-deep .mat-expansion-panel-body {
  text-align: center;
}

以下は動作例です。 https://stackblitz.com/edit/angular-ivy-mheq71?file=src%2Fapp%2Fapp.component.css