SkinClass 在 mxml 中工作，但不在外部 css 中工作
我在 mxml 文件中有一个简单的按钮，如果我在标签本身中设置 SkinClass 属性，它就可以工作，但是，如果我在外部 css 文件中设置 SkinClass 属性，它不适用于该按钮。
有效：
view.mxml
<s:Button id="btnRefresh" skinClass="skins.RefreshButtonSkin"/>
无效：
view.mxml
<s:Button id="btnRefresh"/>
style.css
#btnRefresh
{
skinClass: ClassReference("skins.RefreshButtonSkin");
fontSize: 12px;
}
有人知道我如何让这个 css 工作吗？
注意：我可以使用 css 将其他样式应用于按钮，例如 fontSize 有效
编辑：附加信息
按钮嵌套在我的视图
view.mxml
<s:actionContent>
<s:Button id="btnRefresh"/>
</s:actionContent>
中声明
文件main.mxml
<fx:Style source="style.css"/>
的 actionContent 部分中 css 文件在我的主mxml m 为 flex 4.5.1 编译，它是一个移动应用程序
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.RefreshButtonSkin");
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这似乎是
ActionBar组件中的一个错误。我尝试过 id 选择器 (#btnRefresh)、类选择器 (.btnRefreshStyle)、组件选择器 (s|Button) 和 @Thembie 的建议。我尝试过使用
skinClass和skin-class。当按钮驻留在
View组件的actionContent属性中时，这些都不起作用。但是，当您将按钮移至View组件时，一切正常。所以我担心您必须对皮肤类进行硬编码。您可以考虑提交错误报告。
It would seem that this is a bug in the
ActionBarcomponent. I've tried id selector (#btnRefresh), class selector (.btnRefreshStyle), component selector (s|Button) and @Thembie's suggestion.I've tried using
skinClassandskin-class.None of these work when the button resides in the
actionContentproperty of theViewcomponent. But it all works fine when you move the button to theViewcomponent.So I'm afraid you're stuck with hard-coding that skinclass. You might consider filing a bug report.
s|按钮#btnRefresh
{
SkinClass: ClassReference("skins.RefreshButtonSkin");
}
s|Button#btnRefresh
{
skinClass: ClassReference("skins.RefreshButtonSkin");
}
移动主题中的 defaults.css 具有
ActionBar的样式规则，其 CSS“特异性”级别高于您正在使用的 ID 选择器。简短回答：使用
#actionGroup #btnRefresh作为选择器。长答案：
ActionBar有以下规则选择器来支持移动主题中的“defaultButtonAppearance”样式：这些选择器的存在是为了轻松地将平面外观按钮替换为 iOS 样式“斜角”按钮。
defaults.css in the mobile theme has style rules for
ActionBarwith a higher CSS "specificity" level than the ID selector you're using.Short answer: Use
#actionGroup #btnRefreshas your selector.Long answer:
ActionBarhas the following selectors for rules to support the "defaultButtonAppearance" style in the mobile theme:These are in place to make it easy to swap out the flat-look buttons with the iOS-styled "beveled" buttons.
Jason 是对的，移动主题中的 default.css 会覆盖您的 s|Button#btnRefresh 样式。
为了让你的皮肤正常工作，只需让你的风格更强大，比如：
s|ActionBar s|Group#navigationGroup s|Button#btnRefresh{...}
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{...}