You modify the appearance of Flex components through style properties. These properties can define the size of a font used in a Label control, or the background color used in the Tree control. In Flex, some styles are inherited from parent containers to their children, and across style types and classes. This means that you can define a style once, and then have that style apply to all controls of a single type or to a set of controls. Also, you can override individual properties for each control at a local, document, or global level, giving you great flexibility in controlling the appearance of your applications.

For more information, see Using Styles and Themes.

About inheritance in Cascading Style Sheets

When you implement a style property in an ActionScript component, that property is automatically inherited by any subclasses of your class, just as methods and properties are inherited. This type of inheritance is called object-oriented inheritance.

Some style properties also support Cascading Style Sheet (CSS) inheritance. CSS inheritance means that if you set the value of a style property on a parent container, a child of that container inherits the value of the property when your application runs. For example, if you define the fontFamily style as Times for a Panel container, all children of that container use Times for fontFamily, unless they override that property.

In general, color and text styles support CSS inheritance, regardless of whether they are set by using CSS or style properties. All other styles do not support CSS inheritance, unless otherwise noted.

If you set a style on a parent that does not support CSS inheritance, such as textDecoration, only the parent container uses that value, and not its children. There is an exception to the rules of CSS inheritance. If you use the global type selector in a CSS style definition, Flex applies those style properties to all controls, regardless of whether the properties are inheritable.

For more information about style inheritance, see Using Styles and Themes.

About setting styles

Flex provide several ways of setting component styles: using MXML tag attributes, calling the setStyle() method, and CSS.

Setting styles using MXML tag attributes

Component users can use MXML tag attributes to set a style property on a component. For example, the following code creates a TextArea control, and then sets the backgroundColor style of the component to blue (0x0000FF):

<mx:TextArea id="myTA" backgroundColor="0x0000FF"/>

Setting styles using the setStyle() method

Component users can use the setStyle() method to set a style property on a component. For example, the following code creates a TextArea control, and then sets the backgroundColor style of the component to blue (0x0000FF):

var myTA:TextArea=new TextArea();
myTA.setStyle('backgroundColor', 0x0000FF);

Setting styles using CSS

Component users can use the <mx:Styles> tag to set CSS styles in an MXML application, as the following example shows:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*" >
 
    <mx:Style>
        TextArea {backgroundColor: "0x0000FF"} 
    </mx:Style>
 
    <mx:TextArea/>

</mx:Application>

You can also import an external CSS file, as the following example shows:

<mx:Style source="myStyle.css"/>

Overriding the styleChanged() method

When a user sets a style on a component, Flex calls the component's styleChanged() method, passing to it the name of the style being set. When you create a custom component, you can override the UIComponent.styleChanged() method to check the style name passed to it, and handle the change accordingly, as the following example shows:

var bBackgroundColor:Boolean=false;

override public function styleChanged(styleProp:String):void {

    super.styleChanged(styleProp);

    // Check to see if style changed. 
    if (styleProp=="backgroundColor") 
    {
        bBackgroundColor=true; 
        invalidateDisplayList();
        return;
    }
}

The styleChanged() method first calls superclass' styleChanged() method to let the superclass handle the style change.

After the superclass gets a call to handle the style change, your component can detect that the user set the backgroundColor style, and handle it. By handling the style change after the superclass makes the change, you can override the way the superclass handles the style.

Notice that the method calls the invalidateDisplayList() method, which causes Flex to execute the component's updateDisplayList() method at the next screen update. Although you can detect style changes in the styleChanged() method, you still use the updateDisplayList() method to draw the component on the screen. For more information, see Defining a style property.

Typically, you use a flag to indicate that a style changed. In the updateDisplayList() method, you check the flag and update the component based on the new style setting, as the following example shows:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

    super.updateDisplayList(unscaledWidth, unscaledHeight);

    // Check to see if style changed. 
    if (bBackgroundColor==true) 
    {
        // Redraw the component using the new style.
        ...
    }
}

By using flags to signal style updates to the updateDisplayList() method, the updateDisplayList() method has to perform only the updates based on the style changes; it may not have to redraw or recalculate the appearance of the entire component. For example, if you are changing only the border color of a component, it is more efficient to redraw only the border, rather than redrawing the entire component every time someone changes a style.