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 {
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


Make Your Application  More Look …


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s