Defining Flex 4 Skins with CSS

Question

I am trying to define my Flex 4 Skins via CSS but I my custom skin will not display. Here is what I am doing:

In my application I import my css and define the styleName in my button:

        <fx:Style source="styles.css"/>
        <s:Button label="Button" styleName="circle"/>

Here is my CSS:

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|Button.circle
{
    skinClass: ClassReference("skins.buttons.CircleButton");
}

My understanding is that my button should be supplied it's skinClass via the CSS but it fails to work. If I define the skinClass directly like below it works fine:

<s:Button label="Button" skinClass="skins.buttons.CircleButton"/>

Any help would be appreciated.

I was defining it within a view, I just moved it into the main application file and now it works fine with the type selector.Thanks! — redHouse71

J_A_X J_A_X · Accepted Answer · 2011-04-13T21:29:29

Make sure you have your CSS file under the root Application file first. Second, I would try to do the css without the type selector, so instead of s|Button.circle, just do .circle.

EDIT

You can also try putting the style in a Style tag within the same container as your button to see if that works. Are you sure your application can find your style.css? Showing more code might help the situation.

Defining Flex 4 Skins with CSS

2 Answers