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文件。