How to Override GWT Theme Styles with Custom CSS

When integrating HTML and CSS files into a GWT application, users may encounter an issue where GWT theme styles override their custom styles. This can lead to discrepancies in visual appearance, such as a white background instead of a black one.

To address this issue and ensure that your custom CSS styles take precedence, it is recommended to create a ClientBundle that 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();
}

Within your onModuleLoad() method, inject the CSS file using the following code:

public class YourApp implements EntryPoint {

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

By implementing this approach, you can effectively override the GWT theme styles and ensure that your custom CSS styles are applied, giving you greater control over the visual appearance of your application.