[flexcoders] Using getStyle() for styleName, how does it work with nesting?

[dave_defusion]

I have a custom component, which gets a custom style name using
styleName="{this.getStyle('myStyleName')}". 

I'm using this component in a couple of places within a view and I
want it to be styled differently depending on where it is on the page,
for example:

HBox styleName="detailsWrap"
  Form
    FormItem
       MyComponent

HBox styleName="somethingElse"
  VBox
     MyComponent

I assumed I could just set the following in the CSS:

.detailsWrap {
    myStyleName: 'styleNameOne';
}

.somethingElse {
    myStyleName: 'styleNameTwo';
}

But that doesn't appear to be working, if I inspect the components at
runtime then I see that the style name isn't been set. This appears to
be due to the nesting as if I do the following in the CSS:

MyComponent {
    myStyleName: 'styleNameOne';
}

Then the style in styleNameOne does get applied.

I've also tried using child selectors, but I'm not sure if they're
really supported in Flex, e.g. I've done:

.detailsWrap * * MyComponent 

But that doesn't work either.

Any ideas are greatly appreciated.