如何自定义GWT组件样式？

Question

我正在使用GWT 2.5.1开发一个多模块应用程序。我没有使用任何GWT主题。我想为某些GWT小部件自定义样式，例如Button和CheckBox。

我看到两个解决方案：

• 编写应用程序中加载的CSS文件（HTML页面中的链接）。 CSS将包含使用GWT定义名称的CSS规则，例如.gwt-Button用于按钮，.gwt-CheckBox，.gwt-CheckBox-disabled用于复选框。此解决方案不利用GWT编译器进行的CSS优化。
• 每次使用Button或Checkbox时，请使用CssResource并设置样式名称。此解决方案将利用CSS优化，但每次创建新Widget时都需要设置样式名称。

还有其他解决方案吗？哪个是正确的？

Answer 1

您也可以将这些样式放在CssResource中。 只需将@external放在css文件中的那些样式之上，就可以了。

例如：

@external gwt-DatePicker; 
.gwt-DatePicker {
    ...
}

希望它有所帮助。

Answer 2

其他解决方案：Button是html元素button，Checkbox是html元素input[type=checkbox]。因此，您可以在这些元素上设置样式，并将css选择器用于特定状态。即button:disabled。这样你就不必设置样式名称了，或者没有多少额外的样式名称并使用更清洁的CSS。

Answer 3

您可以为要设置样式的任何窗口小部件（例如MyButton）创建子类，并让您的子类只为每个创建的窗口小部件添加样式名称，或者使用对this.setWidth(), this.getElement().getStyle.setXXX的调用来内联样式。

此外，GWT编译器对CSS执行了哪些优化？我知道它会混淆样式名称以避免碰撞，但我不确定CSS是否能够进行优化？

Answer 4

我个人会使用emanuele的解决方案，但只是提供一个替代方案：您可以使用小部件的getElement()方法直接访问样式名称，所以如果你真的想要，那么你可以使用您创建的样式名称覆盖样式名称。然而，对于具有多种样式的较大小部件和面板，这变得相当困难。