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.

Alphanumeric

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.

Wormeaten

Thanks a lot for your answer. Unfortunately I can't get this to work. I've commented out all the themes from the .gwt.xml file and added the following entry to my .css file: @external .gwt-Textbox { color: red; } Then I'm unsure whether I need to add a method to my CssResourceClass or not. If I add the following lines: @ClassName("gwt-Textbox") String gwtTextbox(); I get an error when launching the app. If I don't add it the TextBox in this case is not affected by the css. – Alphanumeric

No. Use @external gwt-TextBox; on one line (don't forget the semi-colon) to disable obfuscation for that CSS class name, and then use .gwt-TextBox anywhere in your stylesheet, e.g. .gwt-TextBox { color: red; }. You don't need a method on your CssResource if you use the default class name for the widget (what would you use that method for?) – Wormeaten