Button in TitleWindow has wrong color

I've got a TitleWindow with 2 buttons in it. One button is in the contentgroup and the other in the controlbargroup. Titlewindow and buttons are styled with chromecolor.

Why has the bu开发者_开发问答tton in den controlbar not a red color?

How can I get a red button?

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow     xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            horizontalCenter="0" verticalCenter="0"
            width="300" height="400"
            isPopUp="true">

             <s:Button label="Red Button" />

             <s:controlBarContent>
                 <s:Button label="Red Button"  />
             </s:controlBarContent>
</s:TitleWindow>

Style.css:

s|TitleWindow{
    chromeColor: #00FF00;  //Green
    backgroundColor: #0000FF; //Blue

}

s|TitleWindow s|Button{
    chromeColor: #FF0000; //Red
}  

Personally, I would try to add the colors to my button using a styleName on the button themselves unless you really want all buttons under TitleWindow to be red.

In this case, I believe the reason why it isn't being shown in the controlBarContent is because it's not a direct descendant of TitleWindow since that property actually just adds it to a Group (as per the default skin of Panel) under TitleWindow.

Anywho, if I were you I'd do this instead:

s|Button.red
{
   chrome-color:#FF0000;
}

<s:Button label="Red" styleNane="red" />