How to Use Custom Styles to Flex Components

1. Create Style for Your Component ..

Use this URL to simplify the StyleExplorer for Flex Components ..

Style Explorer

2. Create a style css file eg. CustomStyle.css

inside your project src .. eg:  Project\src\assets\styles\CustomStyle.css

Create Styles for the components, You can do this by Creating Styles from Style Explorer and copy the text [ css style ].. from RIGHT MOST PANEL… Named CSS

Eg. CustomStyle.css

/* CSS file */
.TabNavigator {
tabHeight: 30;
horizontalGap: 1;
borderThickness: 1;
tabStyleName: “myTabs”;
firstTabStyleName: “myTabs”;
lastTabStyleName: “myTabs”;
selectedTabTextStyleName: “mySelectedTabs”;
}

.myTabs {
cornerRadius: 0;
}

.mySelectedTabs {
color: #000066;
}

.disabledBGColor {
disabledColor:#000000;
backgroundDisabledColor:#FFFFFF;
borderColor: #cccccc;
}

2. Include this file in your mxml file

<mx:Style source=”/assets/styles/CustomStyle.css” />

3. Apply the  custom style to your component .. by using  “styleName” property of the Component

<mx:TabNavigator width=”99%” height=”99%” styleName=”TabNavigator”>

// Your Code Here

</mx:TabNavigator>

Make Your Application  More Look …