如何自定義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調用來內聯樣式。 this.setWidth(), this.getElement().getStyle.setXXX 。

此外，GWT編譯器對CSS執行了哪些優化？ 我知道它會混淆樣式名稱以避免沖突，但我不確定CSS是否能夠進行優化？

Answer 4

我個人會使用emanuele的解決方案，但只是提供一個替代方案：您可以使用小部件的getElement()方法直接訪問樣式名稱，因此如果您真的想要，可以使用您創建的樣式名稱覆蓋樣式名稱。 然而，對於具有多種樣式的較大小部件和面板，這變得相當困難。