GWT 主题样式覆盖了我的 css 样式答案

【问题标题】：GWT theme style overrides my css styleGWT 主题样式覆盖了我的 css 样式
【发布时间】：2011-01-20 08:03:01
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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(); 
        //...
    }

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

【讨论】：

天哪，终于找到了真正的解决方案。请接受我的投票以表示感谢。
谢谢！这对我有用。我删除了 webcontent 文件夹中的 CSS 并将其移至 xxx.client 。因为@Source 会抛出错误。

【解决方案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 以获取更多指示。

【讨论】：

在模块 XML 中使用
关于 <stylesheet> 被弃用的有趣信息 - 但我不确定这是否值得投反对票（无论是谁投的 ;)），因为其他信息仍然有效（CssResource 和/或UiBinder）。您是否尝试过通过标准 <link> 标签在 HTML 主机文件中添加样式表？或者，如果您确实提出了一种有效/不推荐使用的方法来覆盖默认主题，请与社区的其他人分享 - 我相信它会受到赞赏 :)
我正在寻找或回答这个问题，因为我似乎无法覆盖默认样式（样式表标签已被删除）。
CustomStylesheet.css 必须位于名为 public 的文件夹中，该文件夹必须与您的 *.gwt.xml 文件位于同一目录中。另见Overriding GWT's default stylesheet。
我必须在<stylesheet src="/CustomStylesheet.css" /> 之类的文件名前添加一个斜杠'/'，然后它才能与war 目录中的css 文件一起使用。

【解决方案3】：

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

background-color:#000000;

那么你应该这样写：

background-color:#000000 !important;

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

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

【讨论】：

【解决方案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 并使用这些 ID 更加具体。

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

解决方案<stylesheet src="CustomStylesheet.css" /> 是deprecated，不适用于新的超级开发模式。

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

projectPackage/themes/MyCustomTheme/MyCustomTheme.gwt.xml

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

projectPackage/themes/MyCustomTheme/MyCustomThemeRessources.gwt.xml

</module>

projectPackage/themes/MyCustomTheme/public/gwt/MyCustomTheme/MyCss.css （注意：删除路径的 gwt/MyCustomTheme/ 部分在 devmode 中有效，但在部署版本中无效，因为您仍然可以将“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 文件来获取示例自定义主题。

【讨论】：

请检查MyCustomThemeRessources.gwt.xml的代码，答案中缺少某些内容。

【解决方案7】：

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

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

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

【讨论】：