素材デザインlite - 引き出しのアイコンの色を変更

引き出しのハンバーガーのアイコンを変更する方法が見つかりません。してみましょう話をしているコードです：素材デザインlite - 引き出しのアイコンの色を変更

CODE

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>drawer icon color</title> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> 
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
    </head> 

    <body> 
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
     <header class="mdl-layout__header"></header> 
     <div class="mdl-layout__drawer"></div> 
    </div> 
    </body> 
</html>

OUTPUT

output result

アイコンが白に設定された色で、その後動的に追加されているようだ。

browser generated code

私のクロームコンソールから色を変えても問題ありません。
しかし、私はCSSクラスを使用してみた場合、それは動作しません：

.mdl-layout__header .mdl-layout__drawer-button { 
    color: #000 !important; 
}

私の質問

私はDOMを通じて動的に色を変えたり、直接材料をいじり以外の解決策はありますか.min.js？

（首尾どちらもJavaScriptを使用していない色を変更していない）

<script type="text/javascript"> 
    document.querySelector(".mdl-layout__header .mdl-layout__drawer-button").style.color = "red"; 
</script>

ありがとう！ ♫♪私はあなたにメリークリスマスが欲しいですね♪♫♪♫

出典

2016-12-23 lemour_a

私の提案は離れ材質から移動して、代わりにFontAwesomeを使用することです。少ないコード、JS、CSSだけで動作します。 – junkfoodjunkie

材料アイコンからCSSにiタグを追加しました。これはうまくいきます。スニペットを参照してください。

.mdl-layout__header .mdl-layout__drawer-button i { 
 
    color: #000; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>drawer icon color</title> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> 
 
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
 
    <header class="mdl-layout__header"></header> 
 
    <div class="mdl-layout__drawer"></div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-12-23 14:59:23

私は既にこの答えを試しましたが、ヘッダー部分がある角度コンポーネントにリンクされたCSSスタイルシートにあります。スタイルがアイコンに適用されていないため、角度コンポーネントは、それにリンクされているテンプレートにのみスタイルを適用します。あなたの応答をありがとう、私はそれがvanillia html/cssで動作することを示し、私は間違いが角度に関連していることに気づいたことに感謝します。私は何かを学んだ！ –

フィードバックいただきありがとうございます。 –

素材デザインlite - 引き出しのアイコンの色を変更

答えて

関連する問題