如何定製GWT組件樣式？

Question

我正在開發一個使用GWT 2.5.1的多模塊應用程序。我沒有使用任何GWT主題。我想爲某些GWT小部件定製樣式，例如Button和CheckBox。

我看到兩個解決方案：

• 寫的應用程序（鏈接在HTML頁面）加載CSS文件。 CSS將包含使用GWT定義名稱的CSS規則，如用於按鈕的.gwt-Button和用於複選框的.gwt-CheckBox，.gwt-CheckBox-禁用。該解決方案不利用GWT編譯器進行的CSS優化。
• 使用CssResource並在每次使用按鈕或複選框時設置樣式名稱。此解決方案將利用CSS優化，但每次創建新的Widget時都需要設置樣式名稱。

還有其他解決方案嗎？哪一個是正確的？

Answer 1

其他解決方案：按鈕是html元素button和複選框html元素input[type=checkbox]。所以你可以在這些元素上設置樣式，並使用特定狀態的css選擇器。即button:disabled。這樣你就不必設置樣式名稱，或者沒有很多額外的樣式名稱並使用清晰的CSS。

Answer 2

您也可以將這些樣式放在CssResource中。 只需在css文件中的這些樣式之上放置@external，就可以了。

例如：

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

希望它能幫助。

Answer 3

您可以對任何想要樣式化的小部件（例如MyButton）進行子類化，並讓您的子類爲每個創建的小部件添加樣式名稱，或者使用對this.setWidth(), this.getElement().getStyle.setXXX的調用進行內聯樣式。

此外，GWT編譯器在CSS上執行什麼優化？我知道它會混淆樣式名稱以避免碰撞，但我不確定CSS是否能夠優化？

Answer 4

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