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

Question

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

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

我如何覆盖gwt主题样式并使用我的css样式？

- david

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

在我看来，这是覆盖样式最干净、最简单的方法。

- tsauerwein

---

我的天啊，终于有一个真正的解决方案了。请接受我的点赞作为感谢的表示。 - Jeffrey Blattman

谢谢！这对我有用。我将 webcontent 文件夹中的 CSS 删除并移动到 xxx.client 中，因为 @Source 会抛出错误。 - Mariano L

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。

请务必阅读文档中相关章节以获取更多指引。

- Igor Klimer

---

在模块 XML 中使用 <stylesheet> 标签已经不起作用了。文档说它已被弃用，但实际上并没有任何作用。很难相信他们会使默认行为是库主题优先于应用程序的自定义样式。 - Jeffrey Blattman

关于<stylesheet>被弃用的有趣信息，但我不确定这是否值得投反对票（无论是谁投的）因为其他信息仍然有效（CssResource和/或UiBinder）。您是否尝试通过标准的<link>标签在HTML主机文件中添加样式表？或者如果您找到了一种可行的/未被弃用的方法来覆盖默认主题，请与社区分享 - 我相信这将受到赞赏 :) - Igor Klimer

我也在寻找这个问题的答案，因为我似乎无法覆盖默认样式（样式表标签已被删除）。 - Chris

CustomStylesheet.css 必须位于名为 public 的文件夹内，该文件夹必须与您的 *.gwt.xml 文件在同一目录下。另请参见覆盖 GWT 默认样式表。 - tsauerwein

我不得不在文件名前面添加一个斜杠'/'，例如<stylesheet src="/CustomStylesheet.css" />，这样它才能与war目录中的CSS文件一起工作。 - Johanna

Answer 3

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

background-color:#000000;

那么你应该像这样编写它：

background-color:#000000 !important;

对于html文件中的所有样式，都需要执行相同的操作。

请注意，如果您能找到任何更好的替代方案，使用!important并不是最佳选择。

- Sarfraz

Answer 4

解决方案<stylesheet src="CustomStylesheet.css" />已经弃用，并且无法与新的superdevmode一起使用。

一个适用于我（使用GWT 2.7）的解决方案是创建一个新的自定义主题： projectPackage/themes/MyCustomTheme/MyCustomTheme.gwt.xml

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

projectPackage/themes/MyCustomTheme/MyCustomThemeRessources.gwt.xml

</module>

项目包/主题/我的自定义主题/公共/gwt/我的自定义主题/MyCss.css （注意：在开发模式下删除路径中的gwt/MyCustomTheme/部分有效，但在部署版本中无效，当然您仍然可以将“MyCustomTheme”重命名为您喜欢的名称）

您想要使用的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文件。

- H. Hess

---

请检查您的 MyCustomThemeRessources.gwt.xml 代码，答案中有一些内容缺失。 - slartidan

Answer 5

除了使用!important，您还可以依赖于CSS选择器特异性。

大多数（全部？）GWT样式只使用类来声明，例如：

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

如果要覆盖此设置，您可以使用!important，或者您可以在选择器中更加具体化，例如：

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

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

给您的小部件分配ID并使用它们会更具体。

- Damo

Answer 6

我知道这不太优雅，但我发现将GWT生成的输出文件中的standard.css文件替换为一个空文件相当有效。

(Maven可以可靠地处理这个问题。)

- mxro

Answer 7

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

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

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

- Slava Imeshev