How to override default CSS in modern GWT applications?

Question

From the following page: Developer's Guide - CSS Style

it is made clear that in modern GWT apps there's two ways to declare css styles:

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

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

I know it's still possible to use a css style sheet that you reference from either the html page or the .gwt.xml file. However, I'd like to avoid this since these methods are now deprecated.

Answer 1

Use an @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 instance, put the following in any CssResource stylesheet:

@external .gwt-*;

But IMO, the best practice is to instead 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 own theme and tweak your own copy (rather than overriding styles using the CSS cascade). As an added benefit, you'll have lighter stylesheets, so they'll be faster to download 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); so there's no much difference between <ui:style> and a CssResource.