[flexcoders] CSS style in itemrenderer

[vincy8080]

Hello,

Why is the CSS style not applied to my button in the datagrid
itemrenderer (see code below)? What should I do to apply the style
"buttonStyle" to the button in the itemrenderer?

Thanks,

Vincy

----
Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute">
<mx:Style>
        .buttonStyle 
    {
           cornerRadius: 0;
           highlightAlphas: 0, 0;
           fillAlphas: 0, 0, 0, 0;
           fillColors: #000000, #000000, #000000, #eeeeee;
           borderColor: #ffffff;
        }
</mx:Style>
<mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="One" value="1" />
                <mx:Object label="Two" value="2" />
                <mx:Object label="Three" value="3" />
                
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

<mx:Canvas width="100%">
        <mx:Panel title="My panel" width="100%">

        <mx:Button id="myButton" label="click here" styleName="buttonStyle"
/>  <!-- Style here is correctly applied -->
        
<mx:DataGrid dataProvider="{arrColl}" rowCount="{arrColl.length}">
        <mx:columns>
                <mx:DataGridColumn headerText="Text" dataField="label" />
                <mx:DataGridColumn headerText="Value" dataField="value" />
                <mx:DataGridColumn>
                        <mx:itemRenderer>
                                <mx:Component>
                                        <mx:Button label="Click here" 
styleName="buttonStyle" /><!--
Style here is not applied, why? -->
                                </mx:Component>
                        </mx:itemRenderer>
                </mx:DataGridColumn>
        </mx:columns>
                
        </mx:DataGrid>

                
        </mx:Panel>
        
</mx:Canvas>
        
</mx:Application>