GWT主题风格覆盖了我的CSS风格

Question

我有一些带有自己的CSS的html文件.我想在gwt应用程序中使用它们,所以我复制了应用程序中的html和css文件.

问题是当我打开html它使用gwt主题样式.例如在我的CSS中,html'body'背景颜色为黑色,但除非我停用主题,否则它看起来是白色的.

我怎么能覆盖gwt主题样式并使用我的CSS样式？

Answer 1

GWT邮件列表上的这篇文章描述了另一种解决方案.您必须创建一个ClientBundle引用CSS文件的新文件:

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();
}

然后在你的onModuleLoad()方法中你必须注入 CSS文件:

public class YourApp implements EntryPoint {

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

在我看来,这是覆盖样式的最简洁,最简单的方法.

Answer 2

就像Sarfaz所说 - !important应该是你的最后手段,因为它有点击败层叠样式表的整个概念.

无论如何,在GWT中,为了轻松覆盖您选择的主题中包含的核心GWT样式,您应该找到您的模块文件(文件名以*.gwt.xml结尾的那个),然后找到您所在的行声明你的主题并将你的自定义/任何样式表放在它之后,如下所示:

<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />

但请注意,建议使用GWT 2.0 CssResource和UiBinder.

请务必阅读文档的相应部分以获取更多指示.

Answer 3

您可以通过!important在html文件的所有CSS中使用关键字来覆盖GWT的样式,例如,如果您的某个html文件包含此css:

background-color:#000000;

然后你应该这样写:

background-color:#000000 !important;

对html文件中的所有样式执行相同操作.

请注意,使用!important不是最好的方法,如果你能找到更好的选择,你应该先找到它们.