GWT StackLayoutPanel: как изменить цвет фона заголовка

Question

Я хочу изменить базовый цвет заголовка stacklayoutpanel, используя css, и я попробовал все.

.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 и добавив! Важное к стилям, которые вы хотите изменить.Однако лучшее и более чистое решение состоит в следующем:

// 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 по умолчанию и вносить в него изменения.Вам также необходимо исключить gwt по умолчанию css из your_module.gwt.xml и поместить туда только что созданный файл

Answer 3

Ваш стиль CSS неверен.Он пытается нацелить классы со следующей иерархией:

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

Что совершенно неверно.Если вы хотите, чтобы ВСЕ элементы с этими классами имели одинаковый цвет фона, вы должны написать свое правило CSS следующим образом:

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