.listItem + .listItem about aphrodite HOT 2 CLOSED

Hi @marcusnielsen!

You can selectively apply the marginBottom for cases when the listItem follows another list item.

So in your example, you'd do something like this:

const styles = StyleSheet.create({
    listItem: {
        ... your styles go here
    },
    listItemOtherThanFirst: {
        marginBottom: 50
    }
});

const component = (things) => <ul>
    {things.map((t, i) => <li className={css(styles.listItem, i > 0 && styles.listItemOtherThanFirst)}>
       {t}
    }</li>
</ul>;

In general, we restrict Aphrodite to features that are cannot be be emulated at render() (as opposed to componentDidMount time). + is possible to emulate at render() time, as shown above. For instance, :hover and @media queries cannot be emulated at render() time, because they require information about the state of the browser.

from aphrodite.

Even better answer than expected!

from aphrodite.