CSSフレームワーク（MDL）のスタイルを正しく上書きする方法

私は新しいプロジェクトを開始し、MDL（https://getmdl.io）を基盤として使用することに決めました。今私は（私はこれについて実際に何かを見つけることができません）、あなたがスタイルをオーバーライド/拡張するための最良の方法と思われるだろうか？例えばMDLでCSSフレームワーク（MDL）のスタイルを正しく上書きする方法

私は

.mdl-dialog { 
    border: none; 
    box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); 
    width: 280px; 
}

を持っていると私は影を取り除くしたいと思います。

もちろん、私は/オーバライドmaterial.cssでそれを拡張するが、私は私のcustom.cssに.mdl-dialog -entryを追加する必要がある場合ではないよ、または私は新しいクラスを作成する場合（.my-dialogを言うことができます）とDOMに追加しません。 -素子。

また...

たぶん私自身のクラス名とラッピング要素、その後.my-class .mdl-dialog私は自分のクラス名を使用することができない人のため、JSで追加されますよう、DOM要素がありますか？

これを行う正しい方法は何ですか？

出典

2016-05-24 newnoise

私はそれを要約しようとします。あなたは2つのことをすることができます。

1.ルート要素の1つにIDを定義します。例：<body id="mdl-custom">。これはセレクタに優先順位を付けます：Id> class> tag/pseudo-elements。

この利点は何ですか？あなたはMDLと同じ優先度を持つあなたの要素について心配する必要はありません。

この場合、CSSファイルの順序は関係ありません。

custom.cssのMDLクラスをオーバーライドするには、MDLスタイルシートの後にファイルを参照するようにします。

この場合、CSSファイルの順序は重要です。

は今、戻ってあなたのMDL-ダイアログに無影を持つあなたはこれを行うことができます：

#mdl-custom .mdl-dialog { 
box-shadow: none; 
}

出典

2016-05-24 07:35:58 Ricky

より良い方法は、あなたのページに接続された他のすべてのファイルの後にcustom.cssのような独自のcssファイルを添付することです。また、スタイルを変更してcustom.cssでオーバーライドする必要があるクラスを選択します。

<link relation="stylesheet" href="css/styles1.css"> 
<link relation="stylesheet" href="css/styles2.css"> 
<link relation="stylesheet" href="css/styles3.css"> 
<link relation="stylesheet" href="css/custom.css">

あなたがDOM要素をラップし、カスタムクラスを使用している場合はそれだけでDOMノードを作成し、それらにスタイルを適用するなどの余分な作業とブラウザをオーバーロードします。ただし、独自のクラスを既存のDOM要素に追加し、必要に応じてスタイルを変更することができます。

custom.cssで

それがあるべき

.mdl-dialog { 
    box-shadow: none; // add more properties that you wants to override. 
} 
.your-custom-class { 
    background: #f00; // or whatever styles you wants to apply 
}

出典

2016-05-24 07:38:30

CSSフレームワーク（MDL）のスタイルを正しく上書きする方法

答えて

関連する問題