Question

In Flex, spark skin’s are great. It takes few minutes to customize a component.
Mx components are extremely hard to deal with. It took me 2 days to understand how to change background of Menu in Menubar component. And when I found the right way to accomplish it ( http://goo.gl/Tu5Wc ), it simply doesn’t work.
I created very easy application to demonstrate my problem:

<?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"
               creationComplete="application1_creationCompleteHandler(event)">

    <fx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.events.FlexEvent;
            private var menubarXML:XMLList =
                <>
                    <menuitem label="Client">
                        <menuitem label="Profile"/>
                        <menuitem label="Documents"/>
                    </menuitem>
                    <menuitem label="Others">
                        <menuitem label="Profile"/>
                        <menuitem label="Documents"/>
                    </menuitem>
                </>;
            [Bindable]
            public var menuBarCollection:XMLListCollection;
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                menuBarCollection = new XMLListCollection(menubarXML);

            }

        ]]>
    </fx:Script>

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        mx|MenuBar.myStyle {
            backgroundColor: #ff0000;
        }
    </fx:Style>
    <mx:MenuBar height="30" labelField="@label" dataProvider="{menuBarCollection}" menuStyleName="myStyle"/>
</s:Application>

Can someone explain why Menu background is still white?

Answer 1

The Menu Bar itens render a List… Just set, on CSS a style that works with lists (it wont show with ctrl+bar).

mx|MenuBar{
    color:#BBBBBB;
    backgroundColor: #333333;
    contentBackgroundColor: #333333;
}

Just it! It’s easy 😀