React Aphrodite Odd + Even Selectors

Question

Currently I am developing a simple application with React, I have chosen to use Aphrodite for handling my CSS.

However I've come across a problem which I cannot find the answer for and it's handling odd and even psuedo selectors. Has anyone got an example on how to use Aphrodite to handle odd + even psuedo.

John Ruddell · Accepted Answer · 2017-05-28T20:12:08.930

With Aphrodite you use a stylesheet in js and you can define a pseudo class with a string representation of it for an object key. It would look something like this

const styles = StyleSheet.create({
    hover: {
        ':hover': {
            backgroundColor: 'red'
        }
    },
    ... other styles here ...
});

so when using Aphrodite you use their css function to inject it into the <head>

<div className={css(styles.hover)}>I get a red background on hover!</div>

Here is a great video showing how to use Aphrodite (including pseudo classes!)

score 0 · Answer 2 · answered May 28 '17 at 21:45

The above answer is correct, I didn't realise what you can do is this..

const styles = StyleSheet.create({
    red: {
        backgroundColor: '#dedcdb'
    },

    nthChild: {
      ':nth-child(even)': {
        backgroundColor: '#e8e8e8'
      }
    },

    small: {
        '@media (max-width: 600px)': {
            backgroundColor: 'red',
        }
    }
});

Which will colour each even child with the correct colour.

React Aphrodite Odd + Even Selectors

2 Answers2