Question

更新： 我让第一部分工作，但角落没有。见下文第2部分。

如何将样式应用于tabBar（在GWT中），以便一次只能有一个tabBar？我有一些不同的tabPanel需要有不同的样式，但我无法弄清楚如何正确地将样式应用于栏，然后如何将该样式添加到我的CSS。

当我做类似的事情时：

tabBar.addstyle("thisisastyle");

它为整个栏添加了样式，我想将它应用于一组项目，特别是更改各个标签的背景颜色。我使用的是DecorativeTabPanel，我有自己的圆角图像，我想使用它。此外，一旦正确应用了样式，我该如何在CSS中调用它？我目前的尝试是这样的：

.topTabs .gwt-DecoratedTabBar .tabMiddleCenter {

第2部分

在将样式名称设置到选项卡栏并按如下方式对其进行寻址后，可以轻松应用所有其他CSS样式：

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

但这似乎不适用于两个角落，基础GWT会覆盖我的CSS。右角的CSS如下所示：

html > body .gwt-DecoratedTabBar .tabTopRight {

在Firebug（yah Firefox）中检查它时。谁能告诉我如何覆盖这个？

Answer 1

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

然后，你可以自由地重新定义任何“基础”CSS ......最后一个CSS获胜。在Firebug中，您将看到带有“穿透”字体的被覆盖的CSS样式。

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

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

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

Answer 2

一般问题是standard.css作为最后一个样式表动态链接到您的页面。这样，你的一些设置（甚至非常基本的设置，例如身体）可能会被standard.css部分否决。将它从.gwt.xml文件中取消注释并没有帮助，因为你丢失了一堆想要的样式以及用于渲染装饰面板等的标准图形。

我在博客中描述了处理它的方式：http://IlIlIIlIlIlIlII.blog.de/2010/05/12/gwt-s-standard-css-killed-my-page-layout-8574576/

如果您有任何其他建议如何更轻松地处理此问题，我将不胜感激，如果您发表评论。

Answer 3

您可以更改样式主名称并为整体编写自己的样式。

我认为你的问题在mozilla中是不可重现的......它只能在IE中重现。所以你可以做的是，你可以从standard.css文件中复制整个样式，并用baseStyleName替换基本的gwt-DecoratedTabBar。然后在ur .java文件中，将样式主名称设置为customizedStyleName。然后通过删除不需要的图像等编辑不同的样式。希望这会有所帮助。如果您想了解更多信息，请告诉我们。我会发布需要的源代码和css文件。

更改GWT tabBar项目的CSS

3 个答案: