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 中使用<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">
【讨论】:
以上是关于GWT 主题样式覆盖了我的 css 样式的主要内容,如果未能解决你的问题,请参考以下文章