UiBinder inline styles using default GWT CSS class names are not applied

Question

I'm using GWT with UiBinder and I somehow can't manage to get the default CSS style rules to work correctly. So far, I've been successfully styling my components by assigning custom CSS class names, like this:

<ui:style>
    .createButton {
        background-color: red;
    }
</ui:style>

<g:FlowPanel>
   <g:Button styleName="{style.createButton}">Create</g:Button>
</g:FlowPanel>

But when using GWT's default CSS class names like in the following example, the style is not applied at all:

<ui:style>
    .gwt-Button {
        background-color: red;
    }
</ui:style>

<g:FlowPanel>
   <g:Button>Create</g:Button>
</g:FlowPanel>

I think that it could have something to do with the way GWT handles UiBinder class names. When I inspect the button in my web application with Firebug after setting the UiBinder stylename to {style.createButton}, it uses some kind of obfuscated class name:

class="GBMSFK0DJJ"

When I inspect it after not having assigned any class name at all, it says:

class="gwt-Button"

Although the button seems to have the right class name, the style I defined in the UiBinder style section is not applied. Am I missing something or is this a bug?

(In case you wonder why I don't just assign my own custom style name to the button: I'm actually trying to style TreeItems by using .gwt-TreeItem, but the button class is probably a nicer example.)

Answer 1

.gwt-Button in your ui:style will be obfuscated, and therefore won't be applied to a class="gwt-Button".

You have to mark it as @external for it not to be obfuscated:

@external .gwt-Button;

.gwt-Button { background-color: red; }