角度コンポーネント内の角度のある材質スタイルを上書きする

Question

角度コンポーネントには、材質2 <md-input-container>を使用しています。クラスの1つをオーバーライドしたいと思います。角度材料で定義された.mat-input-wrapper。しかし、私はそのコンポーネント内でのみオーバーライドする必要があり、オーバーライドはページ内の他のコンポーネントに影響しません。

Answer 1

を@Dylanが指摘したように、あなたが使用する必要があります。ここ

は、レンダリングされた要素のスクリーンショットです/deep/子のcompoenets内のCSSを変更します。

:host /deep/ md-input-container .mat-input-wrapper

Answer 2

divで包み：

<div class="special"> 
    <md-input-container> 
</div> 

のCss：

.special md-input-container .mat-input-wrapper { 
    //your css 
} 

Answer 3

好ましい解決策は、おそらくあなた自身の素材テーマのスタイルシートにスタイルを定義するには、次のようになります。ここで私が探していた答えがあります。/deep /の使用は推奨されません（角V 4.3）：https://angular.io/guide/component-styles#special-selectors

独自のテーマスタイルシートを定義する代わりに、:: ng-deepを使用できるようになりました。しかし

、する必要はありません（マテリアルアイコンが同様にフォントファミリと同様に）、デフォルトのフォントファミリを上書きするためにそれを使用するときに::のNG-深い負に再び使用材質のアイコンに影響を与えることができる

Answer 4

を使用して<div class="someCssClassName">で囲みます。使用して別の '子' 要素にこれを適用する

mat-card mat-card-content, 
mat-card mat-card-title { 
    color: red; 
} 

<mat-card-content>のような：むしろ、カードのタイトルのような角度材料素子..

<mat-card> 
    <mat-card-title> 
     {{title}} 
    </mat-card-title> 
</mat-card> 

CSSのスタイルを設定しますCSSエディタで[VS Code]をクリックすると、このCSSのレンダリング方法の詳細が表示されます。この例ではもちろん、<mat-card>...<mat-card-title>

、あなたはCSSクラス名は<mat-card class="card-style-1"のように、要素自体にclass="card-style-1"を追加することで区別をする必要がありますよりも、あなたは、単一のコンポーネントでカードの複数の用途を持っている場合。

CSS：

mat-card.card-style-1 mat-card-content, 
mat-card.card-style-1 mat-card-title { 
    color: red; 
} 

これに代わるものは、必要に応じて各スタイリング、異なるカードの用途に特有の個々のコンポーネントを作成することです。