覆盖ExtJS 4的CSS重置,以便在组件中自定义HTML

Question

我正在将Ext 3.x中的现有应用程序更新为4,并且我已设法启用Ext的scoped reset CSS选项以防止Ext将CSS重置应用于我的整个应用程序,但是我现在遇到另一个问题.我的应用程序使用了很多硬编码的,非ext生成的HTML和CSS样式,其中大部分包含在Ext组件(面板,tabpanels等)中.显然,由于这个html是ext组件包含元素的后代,它继承了CSS重置样式.结果,完全提升了非Ext html的自定义样式.

具体来说,有两个CSS规则导致了这些问题:

.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]

这个属性不是什么大问题,我所要做的就是创建我自己的重置包装类,它将box-sizing改回'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中的所有不同元素都没有相同的边距和填充,所以我不能像我对box-sizing那样覆盖这些样式.并且这个规则优先于我的大多数自定义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
}