How to Override GWT Theme Style Precedence for Custom CSS?

Overcoming GWT Theme Style Precedence

For projects using both HTML files with custom CSS and GWT, a conflict may arise where the GWT theme style takes precedence over the CSS styles. This issue becomes apparent when elements like the HTML body have a different background color in the CSS but appear differently within the GWT application.

To resolve this issue and enforce the CSS styles, a workaround involves overriding the GWT theme style. A solution from the GWT mailing list suggests creating a new ClientBundle that references the CSS file:

<code class="java">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();
}</code>

Within the onModuleLoad() method, the CSS file should be injected:

<code class="java">public class YourApp implements EntryPoint {

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

This alternative method provides a clean and straightforward way to override the GWT theme style and ensure the desired CSS styles are applied within the GWT application.

The above is the detailed content of How to Override GWT Theme Style Precedence for Custom CSS?. For more information, please follow other related articles on the PHP Chinese website!