This worked for me in Flex 184.108.40.20621 (the Border container was recently renamed BorderContainer, you'll have to modify the code or try downloading a newer Flex 4 SDK from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 ):
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:VerticalLayout paddingLeft="20" paddingTop="20" /> </s:layout> <s:SkinnableContainer backgroundColor="red" width="400" height="100"> <s:Label text="SkinnableContainer w/ backgroundColor" /> </s:SkinnableContainer> <s:BorderContainer backgroundColor="haloOrange" width="400" height="100"> <s:Label text="BorderContainer w/ backgroundColor" /> </s:BorderContainer> </s:Application>
As Peter pointed out the backgroundColor style should be available on SkinnableContainer-based components in recent SDK builds (post beta2).
The Group/DataGroup containers still do not have this style. To add a background color to a Group you will need to use a Rect. See this post for more details: http://flexponential.com/2009/11/23/adding-a-background-color-to-a-spark-group/
Sorry, I should have mentioned that I'm trying to do this from CSS. I'm running 220.127.116.11292.
The color is being applied properly to the contents, but the background color isn't. I can't do it from mxml either- backgroundColor doesn't autocomplete, and if I put it in anyway, it complains that it can't be resolved.
Thanks Peter- 18.104.22.16835 got it working properly.