角型2 AppでのMdメニューのカスタムスタイリング背景色

Angular 2アプリでMaterial2スタイリングをオーバーライドしようとしていますが、これまで動作させることができません。具体的には、md-menuの背景色を上書きしたい。角型2 AppでのMdメニューのカスタムスタイリング背景色

<md-menu #menu="mdMenu" [overlapTrigger]="false" class="sub-drop-bg"> 
    <button md-menu-item routerLink="option-A" class="sub-drop-item">Option A</button> 
... 
</md-menu>

そして、これは私が私のLESS/CSSに追加しようとしたものです：：これは私のHTMLは次のようになります

md-menu.sub-drop-bg /deep/ { 
    background-color: #555 !important; 
}

は、これまでのところ、これは効果がないようです。デフォルトの#fff背景色は、まだmdメニューの背景に表示されます。追加情報として

、私はオーバー置いて要素を検査するとき、私はこのように、白い背景でスタイルされているように、デフォルトmat-menu-contentクラスを参照してください：私は私のコンポーネントにそのクラスを追加しようとしました

.mat-menu-content { 
    background: #fff; 
}

CSSを使用し、それを使用して背景色を無効にすることもできます。そのクラスの色をブラウザのコンソールで「選択解除」すると、背景色が消えて透明になります。しかし、私が言っているように、クラスを追加し、私のCSSで色をオーバーライドしても、リロード時に白い色が上書きされることはありません。

これをCSSだけでどうやって達成できますか？

出典

2017-10-04 Muirik

をメニューからマットメニューへ。実際、マテリアル2のベータ12では、すべてのmd接頭辞を非推奨にしました。これは現在、すべてのマットです。 – zszep

右ですが、これは上記のようにAngular 2アプリです。 – Muirik

htmlコード内のあなたのタグからわかるように、これはマテリアルを使ったAngular 2アプリです。「npm install @ angular/material @ latest」を実行すると、角度材料2ベータ12がインストールされます。あなたとまったく同じ問題がありました。 – zszep

私は間違っていないよ場合は、以下のCSSはあなたのために働く必要があります。

/deep/ .mat-menu-content { 
    background-color: #555 !important; 
}

出典

2017-10-04 22:10:43

で試してみることができます。幸運にも、不運にも。 – Muirik

try：/ deep/.mat-menu-content {background：＃555！important; } –

更新@muirik。ありがとう！ –

ます。また、この使用することができます。彼らは、MDからCSSクラスを変更した

::ng-deep .mat-menu-content{ 
    background-color:red; 
}

demo

出典

2017-10-04 22:16:42 Vega

角型2 AppでのMdメニューのカスタムスタイリング背景色

答えて

関連する問題