カスタム Angular マテリアル UI CSS スタイル

Question

<p>Mat-grid-tile タグを使用していますが、CSS クラスを使用していることに気付きました。 Mat-grid-tile -content。以下にコピーして貼り付けます。
<br /><br />ブラウザの開発ツールから align-items: center; プロパティを無効にするか、以下の CSS で align-items: flex-start に変更すると、完全に機能します（上から下へ）。 <br /><br />私の質問は、この特定のプロパティをオーバーライドするにはどうすればよいですか? 調べたところ、インライン CSS の使用は機能せず、ng::deep は良い習慣ではないことがわかりました。データがトップダウン形式で表示されるようにオーバーライドする方法を理解するのを手伝ってください。他に解決策があれば教えてください。 <br /><br />明らかに、チャットはこれを気にしません。 </p>

<pre class="brush:php;toolbar:false;">.mat-grid-tile-content { トップ: 0; 左: 0; 右: 0; 下: 0; 位置: 絶対; ディスプレイ: フレックス; 整列項目: 中央; コンテンツの位置揃え: 中央; 高さ: 100%; パディング: 0; マージン: 0; }</pre> <p>初心者の方、アドバイスをお願いします</p>

Answer 1

残念ながら、カプセル化のため、Angular マテリアルの CSS を変更するのは簡単ではありません。詳細については、リンク https://material.angular.io/guide/customizing-component-styles を参照してください。

Angular マテリアル スタイルはデザインを簡単に変更できないため、変更する推奨される方法はありません。ただし、それでも続行したい場合は、次の 3 つの方法が考えられます。

カプセル化を無効にする: カプセル化を無効にすると、テンプレート内の他のコンポーネントの子要素を含む、コンポーネント内のすべての CSS スタイルに影響します。詳細については、https://angular.io/guide/view-encapsulation をご覧ください。

Angular プロジェクトのルート ディレクトリにある style.css ファイルの .mat-grid-tile-content クラスをオーバーライドします。すべての CSS スタイルは、プロジェクト内のすべての HTML テンプレートに適用されます。変更が有効にならない場合は、属性の最後に ! important キーワードを使用してみてください。

::ng-deep の使用 (非推奨): ::ng-deep は非推奨ですが、完全な代替手段がないため、一部の開発者は依然としてそれを好んでいます。ただし、非推奨になると将来的に問題が発生する可能性があるので注意してください。

要約すると、Angular マテリアル スタイルを変更することはお勧めできませんが、変更する場合は、それぞれのアプローチの潜在的な結果を考慮してください。