I would like to be able to style a TextFlow element with styles defined in my CSS file. My current TextFlow implementation is shown below but changes to my styles do not seem to take effect. How would I style TextFlow with CSS styles in Flex 4.5.1?
// In defaults.css
.textHeader
{
fontFamily: "Trebuchet MS";
fontWeight: normal;
fontStyle: normal;
fontSize: 25;
color: #FF0000;
}
.textBody
{
fontFamily: "Trebuchet MS";
fontWeight: normal;
fontStyle: normal;
fontSize: 12;
color: #525252;
}
// In MySkin.mxml
<s:RichText left="5" right="5" top="5" bottom="5" id="richText">
<s:textFlow>
<s:TextFlow>
<s:p styleName="textHeader">
Cupcake cookie cotton candy chupa chups biscuit marzipan.
</s:p>
<s:p styleName="textBody">
Cupcake cookie cotton candy chupa chups biscuit marzipan.
Jelly beans cake jujubes. Powder cotton candy apple pie applicake.
Bear claw powder dessert macaroon.
</s:p>
</s:TextFlow>
</s:textFlow>
</s:RichText>
I don't think you can do this. At least not easily. According to Adobe, TLF doesn't support CSS style declarations:
http://help.adobe.com/en_US/flex/using/WS02f7d8d4857b1677-165a04e1126951a2d98-7ff2.html
However, you might find 3rd party implementations that work:
https://dev.c-ware.de/confluence/display/PUBLIC/Flex4+Text-Flow+and+CSS-Styles
(I haven't tried it myself).