angular - angular-material2スタイルを上書きするには?

Question

Material Design Componentsで Angular2 を使用しています。また、いくつかのスタイルを上書きしたいのですが、ViewEncapsulation のためにできないようです。

サードパーティ コンポーネントのViewEncapsulation (ViewEncapsulation.None) をオフにすることはできますか?

Answer 1

私は個人的には実際のサード パーティのソース (カプセル化の変更など) には触れません。

しかし、これを処理するために、いくつかの解決策を示します。

1-- 醜い :

viewEncapsulation が none の場合、コンポーネント (おそらく最上位のコンポーネント) から必要なものをオーバーライドできます。

app.ts に移動して、カプセル化を none に変更し、その中で必要なことを行います。

  inside your app.scss or css

    md-input {

       input { color:red} 

     // or whatever style you want to override , sometimes you'll need !important .
    }

2-- よりよい:

Material にはいくつかの variables.scss ファイルがあり、それらのソースで問題なく使用でき、色などの変数を簡単にオーバーライドできます。

一般に、オーバーライド元のコンポーネントがカプセル化されている場合にのみ、グローバル css をオーバーライドできます。それ以外の場合、スタイルはそのコンポーネントの外には出ません。