Css 将样式应用于GWT小部件

我刚刚开始探索GWT，我对将样式应用于GWT小部件的不同方式感到困惑。在GWT文档中，有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文件？如何使用上面提到的第三个和第四个样式选项来实现这一点？

您只需将CSS文件添加到主机页即可。然后您可以使用CSS选择器的全部功能。这是我在GWT中使用CSS的首选方法：

---

如果你能举一个问题中提到的使用客户端捆绑包+css资源的例子，这将非常有用。我不使用这些选项-我发现它们的开发速度太慢，与独立的css文件相比，很难维护。