How to Override GWT Theme Style with Custom CSS?

Overriding GWT Theme Style with Custom CSS

When integrating HTML files with custom CSS styles into GWT applications, you may encounter a conflict where the default GWT theme style overrides your styles. Here's how to resolve this and give precedence to your custom CSS.

Alternative Solution

As suggested in a GWT mailing list discussion, you can create a ClientBundle to reference your 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 of your EntryPoint class, inject the CSS file to ensure its precedence over the GWT theme style:

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

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

This method offers a clean and convenient way to override the GWT theme style with your custom CSS, ensuring that the intended visual presentation of your application is maintained.

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