如何在现代 GWT 应用程序中覆盖默认 CSS？答案

【问题标题】：How to override default CSS in modern GWT applications?如何在现代 GWT 应用程序中覆盖默认 CSS？
【发布时间】：2011-11-18 13:10:08
【问题描述】：

来自以下页面：Developer's Guide - CSS Style

很明显，在现代GWT 应用程序中有两种声明css 样式的方法：

使用包含在 ClientBundle 中的 CssResource。在 UiBinder 模板中使用内联元素。

您如何使用这两种方法中的任何一种来覆盖GWT 默认样式，例如gwt-Button、gwt-TextBox 等？

我知道仍然可以使用从 html 页面或 .gwt.xml 文件中引用的 css 样式表。但是，我想避免这种情况，因为这些方法现在已被弃用。

【问题讨论】：

标签： css gwt cssresource clientbundle

【解决方案1】：

使用@external @-rule 禁用给定 CSS 类名称的混淆：http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes 例如，您可以在任何 CssResource 样式表中添加以下内容：

@external .gwt-*;

但 IMO，最佳实践 是在小部件上改为 addStyleName 或 setStyleName（或分别在 UiBinder 中 addStyleNames="…" 或 styleName="…"）。如果您想自定义主题，请先将其复制为您自己的主题并调整您自己的副本（而不是使用 CSS cascade 覆盖样式）。作为一个额外的好处，您将拥有更轻量级的样式表，因此它们可以更快地为您的用户下载，并且“越快越好”。

附带说明，UiBinder 生成一个隐式ClientBundle，其中每个<ui:style> 元素生成一个隐式CssResource（并自动在其上调用ensureInjected()）；所以<ui:style> 和CssResource 之间没有太大区别。

【讨论】：

非常感谢您的回答。不幸的是，我无法让它工作。我已注释掉 .gwt.xml 文件中的所有主题，并将以下条目添加到我的 .css 文件中：@external .gwt-Textbox { color: red;然后我不确定是否需要向我的 CssResourceClass 添加方法。如果我添加以下行：@ClassName("gwt-Textbox") String gwtTextbox();启动应用程序时出现错误。如果我不添加它，这种情况下的 TextBox 不受 css 的影响。
没有。在一行中使用@external gwt-TextBox;（不要忘记分号）来禁用对该CSS类名称的混淆，然后然后在样式表中的任何位置使用.gwt-TextBox，例如.gwt-TextBox { color: red; }。如果您使用小部件的默认类名，则不需要在 CssResource 上使用方法（您会使用该方法做什么？）