Defining Flex 4 Skins with CSS

Question

I am trying to define my Flex 4 Skins via CSS, but I am not creating my own skin. That's what I'm doing:

In my application, I import my css and define the style name 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 provided to her by skinClass via CSS, but it does not work. If I define skinClass directly as shown below, it works fine:

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

Any help would be appreciated.

Answer 1

First, make sure you have the CSS file in the root file of the application. Secondly, I would try to make css without a type selector, so instead of s|Button.circle just do .circle .

EDIT

You can also try putting the style in the Style tag in the same container as your button to see if this works. Are you sure your application can find your style.css? Displaying more code may help in the situation.

Answer 2

In the official documentation for Flex CSS :

Class selector: The CSS class selector matches the components that correspond to the state class. The CSS syntax for declaring a class selector must prefix a condition with a period. You can also declare a class selector as the state of a type selector, or universally to any type that matches a class condition.

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

Note. In Flex, a class condition is satisfied using the styleName attribute on the component. For example, you may have two classes of HBox: "title" and "Footnote". Above, the first selector applies to any component with StyleName = "header"; the second selector should only be applied to HBox components with the style Name = "footer" (something that should actually be fixed and applied in Gumbo, since modern class selectors are universal and any type in the selector is ignored).

It seems that the selector does not work in Gumbo ...