GWT StackPanel样式

Question

我想这应该是直截了当的，除非我就是弄不明白。我在试着使用堆叠面板。我正在尝试设计它的样式，以便标题的文本、背景颜色等与我应用程序的其余部分相匹配。

我正在使用css和一个客户端包将样式应用到我的组件。

我尝试过使用两种方法设置stackpanel的样式，但都失败了。

Method1：

如果我将以下内容应用于MyProject.html style部分：

.gwt-StackPanel .gwt-StackPanelItem {
    font-weight: normal;
    font-size: 8pt;
    width: 100%;
    background: green;
}


.gwt-StackPanel .gwt-StackPanelItem-selected {
    background-color: red;
}

然后在firefox中加载它，我仍然看到默认的样式。如果我打开firebug并检查元素，我看到gwt默认样式仍在应用。

方法二：

如果我将上述样式封装在css文件中，那么GWT编译器会抱怨模糊样式吗？所以我在样式中添加了@external属性，编译器没有抱怨，但我仍然没有看到我的更改被应用。

提前感谢！

Answer 1

我知道这是一个迟来的答复，但如果有人稍后来这里，我有一个建议。你的CSS被gwt主题覆盖的原因是gwt主题在你的模块文件(.gwt.xml)中占据了重要的位置。改变这一点的方法是在模块文件中的gwt主题之后包含您自己的CSS文件。

例如，您应该在模块文件中看到类似以下内容：

<!-- You can change the theme of your GWT application by -->
<!-- uncommenting any one of the following lines. -->
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->
<inherits name='com.google.gwt.user.theme.clean.Clean' />

在此之后的某个位置，为您自己的css文件添加一个样式表语句：

<!-- CSS Style Sheet includes -->
<stylesheet src="<pathToYourCSSFile>.css" />

现在，因为您的文件包含在gwt样式之后，所以您的样式将优先于gwt！

Answer 2

我总是从模块的xml文件中注释掉这一行：

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

然后，您可以使用自己的样式，将样式名添加到小部件(stackPanel.setStyle...)如果您需要默认样式的gwt，您可以将其从gwt-user.jss com.google.gwt.user.theme.standard.Standard.public.gwt.standard.standard.css复制到您自己的css文件中。