使用CSS定义Flex 4外观

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.

Answer 1

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

Answer 2

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.