Descendant selectors

[notadamking]

What is the current best practice for selecting child elements from a parent? For example, in one project I need to style the children of a react component that renders subcomponents. I can't do that unless I have descendant selectors. As far as I can tell, there isn't currently any syntax for selecting a '.childClass' from a parent.

e.g.
parent: { color: 'red', '.childClass': { backgroundColor: 'blue' } }

Are there any hacks/planned PR's for this sort of thing or am I just missing how to do this in the docs?

[bennyhobart]

I see two solutions,

you can either pass in a style sheet

<Component styles={{ myComponent: { color: 'red' }, myChildComponent:  { color: 'blue' } }} />

and inside the component

<div className={css(this.props.styles.myComponent)}>
    <div className={css(this.props.styles.myChildComponent)} />
</div>

or colocate your styles with your components.

[notadamking]

But why? Why does aphrodite not support descendant selectors? The api is already there for pseudo selectors. Also, my project is using third party react components that I did not write. How would I go about styling nested components that I did not write? (e.g. I am importing the entire component from npm)

[xymostech]

@adamjking3 We have a long issue thread at #10 about descendant selectors, which I'm going to merge this into. The gist of it is that we're thinking of a way to do it, but it's hard to find a way that both makes the API clear/obvious, and doesn't expose too much power in case we want to change how internals work in the future that would break those use cases.

How would I go about styling nested components that I did not write?

Aphrodite is a library for styling components. It isn't a goal of the library to be able to style things that are not already using Aphrodite.