How to style a standard GWT component (TabBar) differently?

Question

I am using a TabBar and I want to style the component in different ways. So one time this style, another time that style. I thought this will work but it didn't:

TabBar t = new TabBar();
t.addTab( "1" );
t.addTab( "2" );
t.addStyleName( MyResources.INSTANCE.css().slickTab() );

And:

public interface MyResources extends ClientBundle
{
 public static final MyResources INSTANCE = GWT.create(MyResources.class);
 @Source("style.css") MyCssResource css();
}
public interface MyCssResource extends CssResource
{
 String slickTab();
}

In the CSS

.slickTab .gwt-TabBar .gwt-TabBarItem {
  background-color: #ff0000;
  font-weight: normal;
}

But the appearance don't change. What I am doing wrong?

Answer 1

You might be able to force this in CSS.

.slickTab .gwt-TabBar .gwt-TabBarItem {
    background-color: #ff0000 !important;
    font-weight: normal !important;
}

Also, since you're adding a style which is subject to the parent style. If this is the case, you might need to set 'setStylePrimaryName' instead of adding it and toggle between style changes with handlers.

Answer 2

Change your CSS. .slickTab .gwt-TabBar .gwt-TabBarItem will match a TabBarItem inside a TabBar inside a slickTab. However, since the TabBar is the slickTab, and is not inside it, you need to do something like this (note .gwt-TabBar.slickTab):

.gwt-TabBar.slickTab .gwt-TabBarItem {
    background-color: #ff0000;
    font-weight: normal;
}