class > element selector in aphrodite

Question

how to implement >elemnt selector in aphrodite. I want to style my child div to width "100%"

 inputContainer: {
        width: '100%',
        "> div": {
            width: '100%'
        }
    },

but it is not working.

Answer 1

Its a bit of a hack workaround, but I believe this should work with Aphrodite:

    ':nth-child(1n) > div': {
      width: '100%'
    },

It works because Aphrodite basically will transpose anything verbatim into the style tag it creates if you start the rule with a ":".

Answer 2

Use AphroditeJSS instead. It uses the same API as Aphrodite, and handles Aphrodite's some of Aphrodite shortcomings, descendant styling being one of them.

https://github.com/cssinjs/aphrodite-jss

npm i aphrodite-jss --save-dev

 const inputCss = Stylesheet.create = ({ inputContainer: { width: '100%', "> div": { width: '100%' } }, }); 

Answer 3

Aphrodite does not supported nested element styling. I would suggest using styled-components or glamorous.