将样式应用于 GWT 小部件答案

【问题标题】：Apply styles to GWT widgets将样式应用于 GWT 小部件
【发布时间】：2014-06-10 14:13:45
【问题描述】：

我刚刚开始探索 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 文件？如何使用上面提到的样式的第 3 和第 4 选项来完成？

【问题讨论】：

标签： css gwt uibinder cssresource

【解决方案1】：

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

What the best strategy to structure CSS in GWT?

【讨论】：

如果你能举个例子说明我在问题中提到的使用客户端包 + css 资源的情况..
我不使用这些选项 - 与独立的 CSS 文件相比，我发现它们的开发速度太慢且难以维护。