css - 更改 GWT tabBar 元素的 CSS

Question

更新: 我的第一部分工作正常，但 Angular 落没有。请参阅下面的第 2 部分。

如何将样式应用到 tabBar(在 GWT 中)以便一次只能使用一个 tabBar？我有几个需要不同样式的不同 tabPanel，但我不知道如何将样式正确应用到栏，然后如何将该样式添加到我的 CSS。

当我做类似的事情时:

tabBar.addstyle("thisisastyle");

它为整个栏添加样式，我想将其应用于一组元素，特别是更改各个选项卡的背景颜色。我正在使用 DecoratedTabPanel 并且我有自己的一组圆 Angular 图像，我想使用这些图像。另外，正确应用样式后，如何在 CSS 中调用它？我目前的尝试是这样的:

.topTabs .gwt-DecoratedTabBar .tabMiddleCenter {

第 2 部分

在为标签栏设置样式名称并按如下方式寻址后，可以轻松应用所有其他 CSS 样式:

.customizedStyleName .tabTopCenter {
    background-image: url('images/centerTopImage.gif');
}

但这似乎不适用于两个 Angular ，基本 GWT 覆盖了我的 CSS。右上角的 CSS 如下所示:

html > body .gwt-DecoratedTabBar .tabTopRight {

在 Firebug(是的 Firefox)中检查它时。谁能告诉我如何覆盖它？

Answer 1

您应该在加载标准 GWT CSS 或其他支持 CSS 的库后加载您自己的 CSS 样式。

然后，您可以自由地重新定义任何“基础”CSS...最后的 CSS 获胜。在 Firebug 中，您会看到覆盖了带有“删除线”字体的 CSS 样式。

我这样做是为了覆盖标准。 GWT、GWT-Ext 和 Ext-GWT CSS。

如果您正在尝试重载“内置”的 CSS 类并且您没有样式详细信息，请使用 Firebug 来检查它......在再次查看 Javadoc 之后。

“GWT 孵化器”有关于类似于 ImageBundle 的新 CSS 机制的信息... ResourceBundle。以及动态定义样式规则的新方法。