GWT StackLayoutPanel：ヘッダーの背景色を変更する方法

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

あなたのCSSスタイルは正しくありません。

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

これは完全に間違っています。あなたはこれらのクラスを持つすべての要素が同じ背景色を持っているしたい場合は、このようなあなたのCSSルールを記述します。

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

Answer 2

あなたがより良いGWTのデフォルトをもとに、独自のCSSファイルを作成し、そこに変更を加えます。また、your_module.gwt.xmlからgwt default cssを除外して新しく作成する必要があります。

Answer 3

StackLayoutPanelは、時間ヘッダウィジェット/テキストを、公開されていない内部クラスHeaderにラップします。 1つの方法は、デフォルトの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. 

取得することが重要です追加/挿入の呼び出しの後に内部ヘッダーウィジェット！