How to apply proper CSS with GWT components?

I have a gwt application which I need to apply custom themes for specific widgets, so I can maintain the Standard gwt CSS (for other widgets that I don't need to apply css to) in the gwt.xml file :

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

I am using ClientBundle and CssResource approach in my app. I have applied simple css however I need to make a css that will be able to apply css for: selected and not selected, hover and push events/actions on a widget, just like what the standard gwt css provides.

What to write in the my css file so that for a MenuBar when I apply this:

ManuBar menuBar = new MenuBar(false); 
menuBar.setStyleName(AppResources.INSTANCE.css().menuBar())

I will get the same MenuBar effects of a standard MenuBar css of gwt? With the App.css I have below, I just get a black menubar and the font-color of the menubar does not change, I think there is a proper way to apply css with gwt widgets, however I cannot find a good resource about this on the web. What I am trying to accomplish is to be able to change 开发者_JAVA技巧the menubar color theme to say, black, chrome or whatever color but still make the widget look like a real menubar.

App.css:

.menuBar {
    background:#3c3b37;
    font-weight:bold;
    color:#FFFFFF;
    font-size:10px;
}

I have a feeling you might be experiencing the problem lots of us face when we forget to call ensureInjected on the CssResource. The CSS never gets added to the page, and so it looks like it's not working.

AppResources.INSTANCE.css().ensureInjected();

why not try simply with menuBar.setStyleName("menuBar"); I'm sure this will work.