GWT theme style overrides my css style

Question

I have some html files with their own css. I want to use them in a gwt application so i copied the html and the css files in the application.

The problem is when i open the html it uses the gwt theme style. For example in my css the html 'body' background color is black, but it looks white unless i deactivate the theme.

How could I override the gwt theme style and use my css styles?

Answer 1

This post on the GWT mailing list describes an alternative solution. You have to create a new ClientBundle which references your CSS file:

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;

public interface Resources extends ClientBundle {

      public static final Resources INSTANCE = GWT.create(Resources.class); 

      @Source("style.css")
      @CssResource.NotStrict
      CssResource css();
}

And then inside your onModuleLoad() method you have to inject the CSS file:

public class YourApp implements EntryPoint {

    public void onModuleLoad() {
        //...
        Resources.INSTANCE.css().ensureInjected(); 
        //...
    }

In my opinion this is the cleanest and easiest way to override the styles.