skinClass работает в mxml, но не во внешнем css

Question

У меня есть простая кнопка в файле mxml, если я устанавливаю свойство skinClass в самом теге, это работает, однако, если я устанавливаю свойство skinClass во внешнем файле css, это не относится к кнопке.

Работает:

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 works

Редактировать: Дополнительная информация

Кнопка вложена в actionContent часть моего представления

view.mxml

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

Файл css объявлен в моем основном файле mxml

main.mxml

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

Я собираю для flex 4.5.1, это мобильное приложение

Answer 1

Казалось бы, это ошибка в компоненте ActionBar. Я пробовал селектор идентификаторов (#btnRefresh), селектор классов (.btnRefreshStyle), селектор компонентов (s|Button) и предложение @ Thembie.

Я пытался использовать skinClass и skin-class.

Ничто из этого не работает, если кнопка находится в свойстве actionContent компонента View. Но все работает нормально, когда вы перемещаете кнопку в компонент View.

Так что я боюсь, что вы застряли с жестким кодированием этого skinclass. Вы могли бы рассмотреть возможность сообщения об ошибке.

Answer 2

Джейсон был прав, файл default.css в мобильной теме переопределяет ваш стиль s | Button # btnRefresh. Чтобы ваша кожа работала, просто сделайте свой стиль более сильным, например:

s | ActionBar s | Группа # navigationGroup s | Кнопка # btnRefresh {...}

Answer 3

defaults.css в мобильной теме имеет правила стиля для ActionBar с более высоким уровнем «специфичности» CSS, чем используемый вами селектор идентификаторов.

Краткий ответ: используйте #actionGroup #btnRefresh в качестве селектора.

Длинный ответ: ActionBar имеет следующие селекторы для правил для поддержки стиля "defaultButtonAppearance" в мобильной теме:

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

Они созданы для упрощения замены плоских кнопок с помощью «скошенных» кнопок в стиле iOS.

Answer 4

S | Кнопка # btnRefresh { skinClass: ClassReference ("skins.RefreshButtonSkin");

}