如何在现代GWT应用程序中覆盖默认CSS？

Question

从以下页面:开发人员指南 - CSS样式

很明显,在现代GWT应用程序中,有两种方式来声明css样式:

使用ClientBundle中包含的CssResource.在UiBinder模板中使用内联元素.

你如何使用这两种方法来覆盖GWT默认风格,如gwt-Button,gwt-TextBox等？

我知道仍然可以使用从html页面或.gwt.xml文件引用的css样式表.但是,我想避免这种情况,因为现在不推荐使用这些方法.

Answer 1

使用@external@ -rule禁用给定CSS类名称的模糊处理:http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes 例如,您可以在任何CssResource样式表中添加以下内容:

@external .gwt-*;

但IMO,最佳做法是代替addStyleName或setStyleName(或在UiBinder addStyleNames="…"或styleName="…"分别)小部件.如果你想自定义一个主题,首先将它复制为你自己的主题并调整你自己的副本(而不是使用CSS 级联覆盖样式).作为一个额外的好处,您将拥有更轻的样式表,因此为用户下载速度更快,"更快更好".

作为旁注,UiBinder生成一个隐式ClientBundle,其中每个<ui:style>元素生成一个隐式CssResource(并自动调用ensureInjected()它); 所以<ui:style>和a 之间没什么区别CssResource.