How does one define a default style for a custom Flex component? was a good start, but I want to create custom styles for my custom component which contains other components.
The custom component is a Canvas. It contains other Canvases, Buttons, Lists, etc. I do not want to have the child components use the same values as the parent component, and I want to have some style values "jump" the parent component and only affect a specific child (not all of them).
I would like to have a single CSS definition with values for the parent and each of the subcomponents rather than a separate style for each.
Can I have style values in the CSS files that are not actually standard CSS (e.g. buttonCornerRadius, mainPaneBackgroundColor, actionBitmap) ?
Where should I propagate the styles to the child components? this.updateDisplayList() ?
How would I know if the values changed via setStyle or loading a new CSS file (as StyleManager does not have events) ?
Thanks
Best Answer
The more granular way would be to add CSS to each child, but this is a maintenance and readability nightmare.
A less granular way would be to create each child as a Class, and add CSS to each Class file, but this still isn't wonderful.
You could also set the styles for each type of child component (List, ComboBox, Button, et al) in a master CSS:
However, if you will have different styles for the same type of components, you have a couple options.
You could give each child a styleName, and then set the styles in the master CSS:
Or, you could create each child as a custom Class, and then reference the Class in a master CSS.
This method is especially useful if you building components dynamically, or reuse specific types of components. I use this method a lot, especially since these custom Classes can also contain Class-specific business logic.