How to Override GWT Theme Styles with Custom CSS: A Tested Solution

GWT Theme Style Overrides Custom CSS: A Tested Solution

When integrating HTML files with their own CSS into a GWT application, a common issue arises: the GWT theme style overrides the custom CSS styles. For instance, if the custom CSS specifies a black background color for the 'body' element, it appears white unless the theme is deactivated.

This issue stems from the influence of GWT's theme style. To override it and apply your custom CSS, consider the following solution:

Create a ClientBundle interface that references 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, ensure that the CSS file is injected:

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

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

This approach allows you to cleanly and efficiently override the GWT theme style with your custom CSS, retaining the desired styling for your HTML elements.

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