Defining Flex 4 Skins with CSS

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"/>

开发者_如何学JAVAHere 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.

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.

Per the official Flex CSS documentation:

Class Selector: A CSS class selector matches components that meet a class condition. The CSS syntax to declare a class selector is to prefix the condition with a dot. You can either declare a class selector as a condition of a type selector, or universally to any type that meets the class condition.

.header { background-color: #CCCCCC; }

HBox.footer { background-color: #999999; }

Note: In Flex a class condition is met using the styleName attribute on a component. For example, you may have two classes of HBox: "header" and "footer". Above, the first selector applies to any component with styleName="header"; the second selector should only apply to HBox components with styleName="footer" (something that actually needs to be fixed and enforced in Gumbo, as to-date class selectors have only been universal and any type in the selector is ignored).

It looks like selectors may not be working in Gumbo...