將樣式應用於GWT小部件

Question

我剛剛開始探索GWT，但我對將樣式應用於GWT小部件的方法有些困惑，在gwt docs中，有4種方法可以覆蓋小部件的默認樣式，

1）在宿主HTML頁面中使用標記。（不推薦使用）2）在模塊XML文件中使用元素（不推薦使用）。3）使用ClientBundle中包含的CssResource。 4）在UiBinder模板中使用內聯元素。

假設我在某個包中有一個CSS文件，即com.abc.xyz.styles.css。文件包含以下內容，

/**the panel itself**/
.gwt-TabLayoutPanel {
    border: none;
    margin: 0px;
    padding: 0px;
}
/**the tab bar element**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
    background-color: #F4F4F4 !important;
}
/**an individual tab**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
    background-color: #6F6F6E !important;
}

.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
    background-color: white !important;
}
/**an element nested in each tab (useful for styling)**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner {
    font-family: Arial !important;
}

/**applied to all child content widgets**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
    border: none;
    margin: 0px;
    overflow: hidden;
    padding: 15px;
}

我將如何注入此CSS文件？ 如何使用上面提到的樣式的第3和第4個選項完成此操作？

Answer 1

您可以簡單地將CSS文件添加到主機頁面。 然后，您可以使用CSS選擇器的全部功能。 這是我在GWT中使用CSS的首選方法：

在GWT中構造CSS的最佳策略是什么？