Question

我想使用css更改stacklayoutpanel标头背景颜色，我尝试了所有内容。

.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader .gwt-StackLayoutPanelContent .gwt-StackLayoutPanelItem {  
    color: red;
    border:red;
    border-color: red;
    background:red;
    background-color:red;
}

但是只改变了文字颜色，我不希望这样。请问您能解释一下我该怎么做？

Answer 1

StackLayoutPanel将小时标题小部件/文本包装到名为Header的内部类，该类不可公开访问。一种方法是通过将默认的clean.css .gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader样式复制到您自己的css文件，然后将！important添加到您想要更改的样式。但是，更好和更清洁的解决方案是执行以下操作：

// add/insert your item first
myStackLayoutPanel.add(widget, header, size);
// retrieve the Header internal widget (AFTER ADDING!)
Widget internHeader = header.getParent();
// replace default style
internHeader.setStyleName("my_custom_style");

如果您不喜欢使用类css样式，您可以选择执行以下操作：

... same as above
// reset the default style
internHeader.setStyleName("");
// then add your styles programmatically
Style style = internHeader.getElement().getStyle();
style.setBackgroundColor();
etc.

在调用add / insert！

之后检索内部标题小部件非常重要

Answer 2

您的CSS样式不正确。它试图使用以下层次结构来定位类：

.gwt-StackLayoutPanel 
  .gwt-StackLayoutPanelHeader 
    .gwt-StackLayoutPanelContent 
      .gwt-StackLayoutPanelItem

哪个是完全错误的。如果您希望具有这些类的所有元素具有相同的背景颜色，您可以像这样编写CSS规则：

.gwt-StackLayoutPanel, 
.gwt-StackLayoutPanelHeader, 
.gwt-StackLayoutPanelContent, 
.gwt-StackLayoutPanelItem 
{
  background-color: red;
}

Answer 3

您最好根据gwt的默认值创建自己的css文件并在那里进行更改。您还需要从your_module.gwt.xml中排除gwt default css并将其放在新创建的

中

GWT StackLayoutPanel：如何更改标题背景颜色

3 个答案: