Overriding Tag level external CSS of a Flex control

Question

I have an external CSS file which defines the style for the Button tag.

Button {fontSize 11;  blah...}

I'm trying to override this style for the buttons of a ToggleButtonBar:

<mx:ToggleButtonBar dataProvider="{pm.portalNavigation}" fontSize="16" />

Unfortunately, this doesn't seem to work. The fontSize stays at 11. How can I override the external CSS to resize the buttons in my ButtonBar?

Thanks!

Answer 1

Just a guess from the Flex documentation...

<mx:ToggleButtonBar dataProvider="{pm.portalNavigation}" styleDeclaration="font-size:16pt !important" />

Answer 2

you need to set the buttonStyleName property, so

<mx:ToggleButtonBar buttonStyleName="myButtonStyle">...</mx:ToggleButtonBar>

.myButtonStyle{
   font-size: 16;
}