我有一些带有自己css的html文件。我想在gwt应用程序中使用它们,所以我将html和css文件复制到了应用程序中。
问题是当我打开html时,它会使用gwt主题样式。例如,在我的css中,html 'body'的背景颜色为黑色,但除非我停用主题,否则看起来是白色。
我如何覆盖gwt主题样式并使用我的css样式?
在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();
//...
}
在我看来,这是覆盖样式最干净、最简单的方法。像Sarfaz所说的一样,!important
应该是你最后的选择,因为它有点违背了级联样式表的整个概念。
无论如何,在GWT中,为了轻松地覆盖你选择的主题中包含的核心GWT样式,你应该找到你的模块文件(文件名以*.gwt.xml结尾),然后找到你声明主题的行,并将你的自定义/任何样式表放在它之后,就像这样:
<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />
需要注意的是,对于GWT 2.0版本,建议使用CssResource
和UiBinder。
请务必阅读文档中相关章节以获取更多指引。
<stylesheet>
被弃用的有趣信息,但我不确定这是否值得投反对票(无论是谁投的)因为其他信息仍然有效(CssResource
和/或UiBinder)。您是否尝试通过标准的<link>
标签在HTML主机文件中添加样式表?或者如果您找到了一种可行的/未被弃用的方法来覆盖默认主题,请与社区分享 - 我相信这将受到赞赏 :) - Igor KlimerCustomStylesheet.css
必须位于名为 public
的文件夹内,该文件夹必须与您的 *.gwt.xml
文件在同一目录下。另请参见覆盖 GWT 默认样式表。 - tsauerwein<stylesheet src="/CustomStylesheet.css" />
,这样它才能与war
目录中的CSS文件一起工作。 - Johanna您可以在所有html文件的css中使用关键字!important
来覆盖GWT的样式,例如,如果您的一个html文件包含以下css:
background-color:#000000;
background-color:#000000 !important;
对于html文件中的所有样式,都需要执行相同的操作。
请注意,如果您能找到任何更好的替代方案,使用!important
并不是最佳选择。
<stylesheet src="CustomStylesheet.css" />
已经弃用,并且无法与新的superdevmode一起使用。<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>
MyCustomThemeRessources.gwt.xml
代码,答案中有一些内容缺失。 - slartidan!important
,您还可以依赖于CSS选择器特异性。
大多数(全部?)GWT样式只使用类来声明,例如:
.gwt-DisclosurePanel .header {
color: black;
cursor: pointer;
text-decoration: none;
}
如果要覆盖此设置,您可以使用!important
,或者您可以在选择器中更加具体化,例如:
table.gwt-DisclosurePanel .header {
text-decoration: underline;
}
这是如何工作的? 这是因为在选择器中将元素名称(table)添加到类中使其比仅使用类更具体。这将覆盖甚至在标题中列出较低的样式表中的其他样式。
给您的小部件分配ID并使用它们会更具体。
我知道这不太优雅,但我发现将GWT生成的输出文件中的standard.css
文件替换为一个空文件相当有效。
(Maven可以可靠地处理这个问题。)
这很简单。只需将CSS链接放在GWT模块脚本的下方:
<script type="text/javascript" src="myapp/myapp.nocache.js"></script>
<link rel="stylesheet" href="myapp.css" type="text/css">