GWT的主题风格覆盖了我的CSS风格
我有一些HTML文件与自己的CSS。 我想在一个gwt应用程序中使用它们，所以我复制了HTML和CSS文件在应用程序中。
问题是当我打开使用gwt主题风格的html。 例如在我的CSS的HTML“身体”背景颜色是黑色的，但它看起来是白色的，除非我停用主题。
我怎么能重写gwt的主题风格，并使用我的CSS样式？
就像萨尔法斯所说 – !important应该是你的最后的手段，因为它有点击败层叠样式表的整个概念。
无论如何，在GWT中，为了轻松覆盖所选主题中包含的核心GWT样式，您应该find您的模块文件（文件名以* .gwt.xml结尾的文件），然后find您所在的行声明你的主题，并把你的自定义/任何样式表放在它之后 ，就像这样：
<inherits name='com.google.gwt.user.theme.standard.Standard' /> <stylesheet src="CustomStylesheet.css" />
请注意，但是，build议使用GWT 2.0 CssResource和UiBinder 。
请务必阅读文档的相应部分以获取更多指针。
GWT邮件列表上的这篇文章介绍了另一种解决scheme。 你必须创build一个引用你的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()方法中，你必须注入 CSS文件：
public class YourApp implements EntryPoint { public void onModuleLoad() { //... Resources.INSTANCE.css().ensureInjected(); //... }
在我看来，这是覆盖样式的最干净和最简单的方法。
你可以通过使用关键字!important的所有CSS的HTML文件，例如，如果你的HTML文件中包含这个CSS重写GWT的样式：
background-color:#000000;
那么你应该这样写：
background-color:#000000 !important;
对HTML文件中的所有样式执行相同的操作。
请注意，使用!important的不是最好的方法，如果你能find更好的select，你应该先去找他们。
除了使用!important之外，您还可以依赖CSSselect器特定性 。
大多数（所有？）的GWT风格都是用类来陈述的，例如：
.gwt-DisclosurePanel .header { color: black; cursor: pointer; text-decoration: none; }
要覆盖这个，你可以使用!important 或者你可以在你的select器中更具体，例如：
table.gwt-DisclosurePanel .header { text-decoration: underline; }
这个怎么用？ 这是有效的，因为将元素名称（表格）添加到select器中的类使得它比单独的类更具体。 这将覆盖其他样式，即使是在标题中较低的样式表中也是如此。
给你的小部件ID和使用这些更具体。
我知道这不是很优雅，但是我发现用一个空文件replace由GWT生成的输出文件中的standard.css文件是非常有效的。
（Maven可以可靠地处理这个问题。）
解决scheme<stylesheet src="CustomStylesheet.css" />已被弃用，并且不适用于新的超版本模式。
为我工作的解决scheme（使用GWT 2.7）是创build一个新的自定义主题：
projectPackage /主题/ MyCustomTheme / MyCustomTheme.gwt.xml
<module> <stylesheet src="gwt/MyCustomTheme/MyCss.css"/> </module>
projectPackage /主题/ MyCustomTheme / MyCustomThemeRessources.gwt.xml
</module>
projectPackage / themes / MyCustomTheme / public / gwt / MyCustomTheme / MyCss.css （注意：在devmode中删除gwt / MyCustomTheme /path的一部分，但在部署版本中不起作用，因为您仍然可以将“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. eg 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文件。
