ExtJS 4のCSSオーバーライドコンポーネント内のカスタムHTMLのリセット

Question

既存のアプリケーションをExt 3.xから4にアップデートする過程で、Extのスコープ付きリセットCSSオプションを有効にして、ExtがCSSを適用しないようにしました私のアプリケーション全体にリセットしましたが、私はもう別の問題に直面しています。私のアプリケーションでは、ハードコードされた非extで生成されたHTMLやCSSスタイルが多く使われていますが、その多くはExtコンポーネントの（パネル、タブパネルなど）に含まれています。 CSSのリセットスタイリング。そして結果として、非ExtのHTMLのカスタムスタイルを完全にジャックアップします。

.x-border-box .x-reset, .x-border-box .x-reset * {box-sizing: border-box;-moz-box sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box;}[/php] 

このプロパティは、私がしなければならなかったすべては、箱サイズを変更し、私自身のリセットラッパークラスを作成した問題の多くはなかった。

は、具体的に問題を引き起こしている2つのCSSルールがあります'content-box'に戻り、そのクラスをカスタムhtmlの一番上のラッパー要素に適用します。

.my-reset, .my-reset *, .x-reset .my-reset *, .x-border-box .x-reset .my-reset * { box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -webkit-box-sizing: content-box;} 

を他のCSSルールを否定するそれほど単純ではありません何ですが：次のようにそのルールがあり、このルールはとても面倒です

.x-reset html, .x-reset body, .x-reset div, .x-reset dl, .x-reset dt, .x-reset dd, .x-reset ul, .x-reset ol, .x-reset li, .x-reset h1, .x-reset h2, .x-reset h3, .x-reset h4, .x-reset h5, .x-reset h6, .x-reset pre, .x-reset code, .x-reset form, .x-reset fieldset, .x-reset legend, .x-reset input, .x-reset textarea, .x-reset p, .x-reset blockquote, .x-reset th, .x-reset td {margin: 0;padding: 0;} 

理由は、私のカスタムのすべての異なる要素HTMLは同じマージンとパディングを持たないので、ボックスのサイジングと同じ方法でこれらのスタイルをオーバーライドすることはできません。そして、このルールが私のカスタムCSSスタイルの大部分よりも優先されるのは、それがCSSクラスよりも高い特異性を持っているからです。私。 ".x-reset div"セレクタのマージン/パディングスタイルは、 ".my-cool-class {padding：5px; margin：5px;}"のようなルールよりも優先されます。

これを克服するために、私は自分のカスタムCSSを更新して、クラスセレクタの前にターゲティングする要素のタイプ（ "div.my-cool-class"）を付けるか、ルールのプレフィックス.x-reset（ ".x-reset .my-cool-class"）を使用すると、これらのオプションのいずれかが、ファイルサイズの追加はもちろんのこと、既存のカスタムCSSの多くを手動で更新する必要があります。 CSSクラスのモジュール性を制限します。

Extの設定や、他のCSSソリューションを経由する方法はありますか？単にこの問題を上手く解決してくれるかもしれないと思っています。

Answer 1

extjs cssから特定性を削除することができます。そうすれば、あなたのcssがその後に含まれていると「勝ち」ます。

だから、変換：

.x-reset html, .x-reset body, .x-reset div, 
.x-reset dl, .x-reset dt, .x-reset dd, 
.x-reset ul, .x-reset ol, .x-reset li, 
.x-reset h1, .x-reset h2, .x-reset h3, 
.x-reset h4, .x-reset h5, .x-reset h6, 
.x-reset pre, .x-reset code, .x-reset form, 
.x-reset fieldset, .x-reset legend, .x-reset input, 
.x-reset textarea, .x-reset p, .x-reset blockquote, 
.x-reset th, .x-reset td { 
    margin: 0; 
    padding: 0; 
} 

へ：

html, body, div, 
dl, dt, dd, 
ul, ol, li, 
h1, h2, h3, 
h4, h5, h6, 
pre, code, form, 
fieldset, legend, input, 
textarea, p, blockquote, 
th, td { 
margin: 0; 
padding: 0; 

}

私が予想したように、あなたのCSSが

.myPadding{ 
    padding: 10px 
}