Question

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

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

我怎样才能覆盖gwt主题样式并使用我的css样式？

Answer 1

GWT邮件列表中的post描述了另一种解决方案。您必须创建一个引用CSS文件的新ClientBundle：

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()方法中，你必须inject 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。

请务必阅读文档的appropriate section以获取更多指示。

Answer 3

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

background-color:#000000;

然后你应该这样写：

background-color:#000000 !important;

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

请注意，使用!important并不是最好的方法，如果你能找到任何更好的替代方案，你应该首先使用它们。

Answer 4

除了使用!important之外，您还可以依赖CSS Selector Specificity。

大多数（全部？）GWT样式仅使用类来表示：

.gwt-DisclosurePanel .header {
    color: black;
    cursor: pointer;
    text-decoration: none;
}

要覆盖此内容，您可以使用!important 或，您可以在选择器中更具体，例如：

table.gwt-DisclosurePanel .header {
    text-decoration: underline;
}

这是如何工作的？这是有效的，因为将元素名称（表）添加到选择器中的类使其更具体而不仅仅是类。这将覆盖其他样式，甚至是标题中较低的样式表。

提供小部件ID并使用它们更具体。

Answer 5

我知道它不是很优雅，但我发现使用空文件替换GWT生成的输出文件中的standard.css文件相当有效。

（Maven可以可靠地处理这个问题。）

Answer 6

解决方案<stylesheet src="CustomStylesheet.css" />为deprecated，但无法使用新的超级模式。

对我有用的解决方案（使用GWT 2.7）是创建一个新的自定义主题：

<强> projectPackage /主题/ MyCustomTheme / MyCustomTheme.gwt.xml

<module>
    <stylesheet src="gwt/MyCustomTheme/MyCss.css"/>
</module>

<强> projectPackage /主题/ MyCustomTheme / MyCustomThemeRessources.gwt.xml

</module>

<强> projectPackage /主题/ MyCustomTheme /公共/ GWT / MyCustomTheme / MyCss.css （注意：删除gwt / MyCustomTheme /部分路径在devmode中工作但在部署版本中不起作用，因为你仍然可以重命名＆＃39; MyCustomTheme＆＃39;到你喜欢的东西）

您要使用的css文件

<强> Project.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0//EN"
        "http://google-web-toolkit.googlecode.com/svn/releases/2.0/distro-source/core/src/gwt-module.dtd">
<module rename-to="Project">

(...)

<!-- Inherit GWT theme.  e.g. the Clean theme -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Our custom theme      -->
<inherits name='projectPackage.themes.MyCustomTheme.MyCustomTheme'/>

(...)

</module>

注意：您可以使用http://gwt-theme-generator.appspot.com/获取示例自定义主题并解压缩下载的.jar文件。

Answer 7

这很简单。只需将您的 CSS 链接放在 GWT 的模块脚本下：

<script type="text/javascript" src="myapp/myapp.nocache.js"></script>

<link rel="stylesheet" href="myapp.css" type="text/css">

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

7 个答案: