How to declare dependent style names with UiBinder

Question

I have a simple UiBinder widget containing a TextArea:

Answer 1

Here's something valuable I figured out by putting together info from other posts in this thread especially...

If you use @external, you can override gwt styles. The problem is that is this change gets applied globally! It is possible, however, to extend & override select attributes without effecting every instance of a widget type. (This like the programmatic styling method of creating a css class with a gwt class name + a suffix and using addStyleDependantName().)

Here is an example of using UIBinder + a CssResource to extend a gwt style. I left out the CssResource part, but you'll get the idea...

In your xxxx.ui.xml file, expose the gwt style, but don't mess with it!

    @external .gwt-Button; .gwt-Button {}

Then, style a widget it by specifying 2 (or more) styles in the styleName attribute. I.e. the gwt style, and the one (or more) from your resource.

Here's the css class:

.submitButtonStyle{
   margin: 3px 5px 5px 0px;
}

In this case, I defined a button that is styled in the standard method (easily changed via module inheritance) but with a specific margin that will remain fixed. This didn't mess up the global style, it didn't require defining all the attributes manually, and allowed for swapping the global styling at will with clean.css, dark.css, etc.