I ran into issues with Flex Itemrenderers after applying custom styles to a Datagrid.

Displaying the data in a standard Datagrid Column worked fine, such as:

<mx:DataGridColumn headerText="First Name" dataField="firstName" >

But an itemrenderer component just ignored all style declarations.

All I wanted to achieve is having my itemrenderer using the same text color and
textSelectedColor as I declared for the DataGrid in my css file.

After a bit of research I found a solution that works.

In order to use some declared styles from the ListBase (in my case the Datagrid) in my
custom itemrenderer I had to override its updateDisplayList Method.

My inline itemrenderer now looks like this

<mx:itemRenderer>

<mx:Component>

<mx:VBox>
<mx:Script><![CDATA[
import mx.controls.listClasses.ListBase;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight )  ;
if(owner is ListBase) {
if(ListBase(owner).isItemSelected(data) ) {

setStyle(“color”, ListBase(owner).getStyle(“textSelectedColor”) );

}

else {

setStyle(“color”, ListBase(owner).getStyle(“color”) );

}

}

}

]]></mx:Script>

<mx:Label
text=”{data.firstName}” />

<mx:Label
text=”{data.lastName}” />

</mx:VBox>

</mx:Component>

</mx:itemRenderer>

Now this seems all a bit weird cause it has to be done for each itemrenderer and each style that needs to be applied.
But it is the only quick solution I could find so far.

Note:
If using the Advanced Datagrid you need to change ListBase to:

mx.controls.listClasses.AdvancedListBase

for this example to work.