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

Posted

技术标签:

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

解决方案&lt;stylesheet src="CustomStylesheet.css" /&gt; 是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">

【讨论】:

以上是关于GWT 主题样式覆盖了我的 css 样式的主要内容,如果未能解决你的问题,请参考以下文章

覆盖 JQXWidget css 样式不起作用

为啥用户代理样式表会覆盖我的样式? [关闭]

为啥子组件样式被全局 css 覆盖?

一些 Css 样式表选择器仅在我的响应式主题上对 Firefox 生效

Vue.js 如何在组件中定义(覆盖)css 样式?

样式按顺序加载,但 Bootstrap 仍然覆盖 WordPress 子项