angular - Angular2-Material エラー時の md-input スタイルの変更

Question

フォームでエラーが発生した場合は、入力のラベルと、下のテキストの色と境界線の色を変更します。

そこで、ラベル用に次のコードを作成しました。

md-input:not(.ng-valid) label { background-color: red !important; color:red !important; }

ただし、プロジェクトを実行すると、css は次のように変更されます。

md-input[_ngcontent-fcu-13]:not(.ng-valid) label[_ngcontent-fcu-13] { background-color: red !important; color:red !important; } 

したがって、それは機能しません。アイデアはありますか？（グーグル翻訳で翻訳）

Answer 1

このスタイルを記述しているコンポーネントのツリーの外で使用しようとしていますか? _ngcontent-fcu-13 angular などの属性は、ビューのカプセル化を実装するために DOM 要素とスタイルに追加されます。したがって、スタイルをコンポーネント メタデータの一部としてインポートすると、angular はそのような属性をすべてのスタイルに追加します。

グローバル スタイルを app.component に移動するか、index.html に直接挿入する必要があります。

また、追加してビューのカプセル化をオフにすることもできます

encapsulation: ViewEncapsulation.None

コンポーネントのメタデータに

この記事を見てください。それは私を大いに助けます。