md-sort-headerがmd-tableのmd-header-cellに追加されている場合は、常に左揃えです。 "名前"などのヘッダーセルを中央揃えにする方法角材2テーブルヘッダの中心合わせ
<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> Name </md-header-cell>
md-sort-headerがmd-tableのmd-header-cellに追加されている場合は、常に左揃えです。 "名前"などのヘッダーセルを中央揃えにする方法角材2テーブルヘッダの中心合わせ
<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> Name </md-header-cell>
受け入れ答えが正しいです。ただし、::ng-deep
は償却され、将来廃止される可能性があります(official documentation)。
シャドーピアス子孫コンビネータが廃止され、サポートは 主要なブラウザやツールから削除されています。そのため、 のサポートをAngularにする予定です(/ deep /、>>>および:: ng-deepの3つすべてに対して)。 まで::: ng-deepは、ツール との広範な互換性を優先する必要があります。
適切な方法はViewEncapsulationです。あなたのcomponent.tsでは、次の行を追加します。
import { ViewEncapsulation } from '@angular/core';
@Component({
....
encapsulation: ViewEncapsulation.None
})
とあなたのcomponent.cssファイル内のクラスをオーバーライド:
.mat-sort-header-container {
display:flex;
justify-content:center;
}
を私が問題に与えられた解決策は、彼らのアプローチでは、あまりにも厳しいと思います、私はmat-sort-header-container
のいくつかのCSSプロパティを変更する必要があったが、同様の問題があった。
私はベガの答えのような何かをしたが、微妙に異なるスタイルが取られる方法に関する:
::ng-deep .mat-sort-header-container{
justify-content: inherit;
/* other inheritable properties */
}
スタイルmat-header-cell
に、その親のためのいくつかのプロパティを開くあなたのhtmlコードにあるように、何でもあなたが提供するスタイルmat-header-cell
にし、その親から継承しているng-deep
では、それらのスタイルだけがその階層を下ることになります。
私の答えは、同様の問題に関連する将来の参照のために見てください。答えは+1です。 – Faisal