web-dev-qa-db-ja.com

Angularマテリアルmat-expansion-panel-bodyスタイルが適用されていません

コンポーネントのcssファイルに次のcssがあります。

.mat-expansion-panel-body {
  padding: 0;
}

そして、私はこのルールが（オーバーライドされたとしても）次のdom要素に対して表示されることを期待します：

<div class="mat-expansion-panel-body">...</div>

しかし、私が開発ツールに適用されているのは、次のとおりです。

.mat-expansion-panel-body {
  padding: 0 24px 16px;
}

この要素には_ ngcontent-c19クラスがないことに気づきました Host要素はそうするので、これはビューのカプセル化の場合だと思います。

ただし、廃止予定の:: ng-deepおよび/ deep /とその他のカプセル化ピアシング構成の廃止について読んだ後、コンポーネントのcssファイル内からこの要素をスタイル設定するためのより良い解決策は何ですか？

cssangularangular-material
12
Ruklav-Nomad

::ng-deepコンポーネントcssで、私の側で動作しました。

::ng-deep .mat-expansion-panel-body{
     padding: 0;
}
8
Hien Nguyen

:: ng-deepを使用したくない場合に考えられる解決策の1つは、styles.cssファイルにスタイルを設定することです。

.mat-expansion-panel-body {
  padding: 0 !important;
}

これによりパディングが削除されますが、すべてのmat-expansion-panel-body要素から削除されるので注意してください。特定のクラスを拡張パネルに設定して、styles.cssで次のようにすることで、これをバイパスできます。

.my-special-class .mat-expansion-panel-body {
  padding: 0;
}

この場合、重要なことすらありません。これがその例です。

https://stackblitz.com/edit/angular-a6necw

6
ibrcic