skinClass working in mxml, but not in external css

I have a simple button in a mxml file, if I set the skinClass property in the tag itself it works, however, if I set the skinClass property in an external css file, it doesn't apply to the button.

Works:

view.mxml

<s:Button id="btnRefresh" skinClass="skins.RefreshButtonSkin"/>

Doesn't work:

view.mxml

<s:Button id="btnRefresh"/>

style.css

#btnRefresh
{
    skinClass: ClassReference("skins.RefreshButtonSk开发者_JAVA技巧in");
    fontSize: 12px;
}

Someone knows how I can get this css working?

Note: I can apply other styles to the button using the css, eg fontSize works

Edit: Additional info

The button is nested in the actionContent part of my view

view.mxml

<s:actionContent>
    <s:Button id="btnRefresh"/>
</s:actionContent>

The css file is declared in my main mxml file

main.mxml

<fx:Style source="style.css"/>

I'm compiling for flex 4.5.1, it's a mobile application

It would seem that this is a bug in the ActionBar component. I've tried id selector (#btnRefresh), class selector (.btnRefreshStyle), component selector (s|Button) and @Thembie's suggestion.

I've tried using skinClass and skin-class.

None of these work when the button resides in the actionContent property of the View component. But it all works fine when you move the button to the View component.

So I'm afraid you're stuck with hard-coding that skinclass. You might consider filing a bug report.

s|Button#btnRefresh { skinClass: ClassReference("skins.RefreshButtonSkin");

}

defaults.css in the mobile theme has style rules for ActionBar with a higher CSS "specificity" level than the ID selector you're using.

Short answer: Use #actionGroup #btnRefresh as your selector.

Long answer: ActionBar has the following selectors for rules to support the "defaultButtonAppearance" style in the mobile theme:

ActionBar Group#navigationGroup Button
ActionBar Group#actionGroup Button
ActionBar.beveled Group#navigationGroup Button
ActionBar.beveled Group#actionGroup Button

These are in place to make it easy to swap out the flat-look buttons with the iOS-styled "beveled" buttons.

Jason was right, the default.css in mobile theme override your s|Button#btnRefresh style. In order for your skin to work, just make your style stronger like:

s|ActionBar s|Group#navigationGroup s|Button#btnRefresh{...}