Since the 'styleSheet' property returns a standard TextField instance it struck us as weird that setting its 'styleSheet' property didn't work. The TextArea class was trying to set textFormat which fails after setting the stylesheet of the textfield.

Error message:

This pointed us to the 'drawTextFormat()' function in the TextArea class. After taking a look we figured out what to do.

The problem turned out to be that every time you add text to your textarea the class tries to add a designated, or default flash-textFormat to the textfield. Adding Flash TextFormat objects to textfields conflicts with stylesheets. Our solutions was relatively simple: a small class extends of the textArea class.

Click continue for the fixing source

    import fl.controls.TextArea;
 
    /**
    * @makes it possible to do textArea.textField.styleSheet
    * @author Tim de Jong - Dooping VOF 2008 - tim -AT- dooping.nl
    * @version 001
    */
 
    public class doopingTextArea extends TextArea
    {
        public function doopingTextArea()
        {
            super();
        }
 
        override protected function drawTextFormat():void {
            if(!this.textField.styleSheet) super.drawTextFormat();
            else {
                setEmbedFont();
                if(_html) textField.htmlText = _savedHTML;
            }
        }
 
    }

Then load the stylesheet by passing it to the textField object inside the textArea.

var myTextArea = new doopingTextArea();
myTextArea.textField.styleSheet = styleSheetObject;

As you can see we simply check if a styleSheet exists and than decide whether or not to do the original text formatting or not. Now we're able to use CSS on TextArea's and keep styling and code neatly separated.