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.

score 9 · Answer 1 · answered Aug 15 '17 at 20:57

9

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 ":".

answered Aug 15 '17 at 20:57

Yak77

91
1

Note that this is is hack, and might break in future versions. That being said, it's the only thing that seems to work – Andrei Savin Dec 17 '19 at 22:49

score 1 · Answer 2 · answered Jan 21 '18 at 13:48

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%'
        }
    },
});

score 0 · Answer 3 · answered Jul 22 '17 at 13:37

0

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

answered Jul 22 '17 at 13:37

Win

5,498
2
15
20

class > element selector in aphrodite

3 Answers3