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的首选方法：

What the best strategy to structure CSS in GWT?

将样式应用于GWT小部件

1 个答案: