How to override default CSS in modern GWT applications?

Question

On the next page: Developer's Guide - CSS Style

it is clearly stated that in modern GWT applications there are two ways to declare css styles:

Using the CssResource contained in the ClientBundle. Using an inline element in a UiBinder template.

How do you use either of these two methods to override the default GWT styles such as gwt-Button , gwt-TextBox , etc.

I know that you can still use the CSS stylesheet that you link to either the html page or the .gwt.xml file. However, I would like to avoid this, as these methods are now deprecated.

Answer 1

Use @external @ -rule to disable obfuscation for the given CSS class names: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes You can, for example, put the following in the CssResource :

 @external .gwt-*; 

But IMO, it's best to use instead of addStyleName or setStyleName (or in UiBinder addStyleNames="…" or styleName="…" respectively) on widgets. And if you want to customize a theme, copy it first as your theme and set up your own copy (rather than redefining styles using the CSS cascade). As an added benefit, you will have lighter style sheets, so they will load faster for your users, and “faster is better.”

As a side note, UiBinder generates an implicit ClientBundle , where each <ui:style> element generates an implicit CssResource (and automatically calls ensureInjected() on it); therefore there is not much difference between <ui:style> and a CssResource .