GWT overriding theme CSS

I have a PopupPanel, and I want to override some of the styles from the default theme. Eclipse gave me a .css in the doc root, and I put the styles I want to override in there. Inspection from the browser at runtime shows my styles being overridden by the GWT theme.

It's hard to believe that this is the default setup for a new project - an application .css that is loaded after the stock css?

I tried loading my css in my module XML (using stylesheet tag), but that has no effect, it's not loaded at all. The GWT docs say this is deprecated, so I suspect it's just been removed. Regardless, I don't want to use a deprecated interface.

To be clear, this is an ordering problem. I've verified my css is loaded correctly by inspecting the DOM. I can see my styles applied to the element in question, and I can see them overridden by the GWT theme css (dark.css in this case). Adding the !important flag does get my styles applied, but that's obvsiously not the righ开发者_Python百科t solution.

The popup is instantiated in the click handler of an anchor that's defined in a UI widget. The popup itself isn't defined in the template, I simply instantiate it and call show(). I'm not sure if that's relevant.

Can someone describe to me how this should be accomplished? If this is any harder than "put line XXX in file YYY", I'm going to seriously lose my faith in GWT.

GWT just generates some HTML to which CSS is applied. It looks complicated but there isn't any magic going on in the final output. Just HTML, CSS and some JS.

If your PopupPanel is picking up the wrong style it's because the browser isn't seeing your style, or the style in the standard theme (which is standard.css) is taking precedence.

If you have a DOM editor:

1. Inspect the element and see what styles it has against it.
2. Verify your style sheet is being included
3. Verify your style rules are being applied to the element as well.

Most likely it's a simple CSS error of some kind and GWT is the red herring. However if you can't see the error you can consider:

1. Give your element an id or its own additional style and use a rule to override the default behaviour.
2. Completely override .gwt-popupPanel with the style you want to apply everywhere
3. Subclass PopupPanel. Call the super constructor but then strip out the gwt-popupPanel style and replace it with your own style instead. Or augment the gwt-popupPanel and add an extra style of your own.
4. Copy the entire default theme and rename it as something else and use that in your project.

The best option is probably the simplest which would be 1)