React Aphrodite 奇数 + 偶数选择器答案

【问题标题】：React Aphrodite Odd + Even SelectorsReact Aphrodite 奇数 + 偶数选择器
【发布时间】：2017-05-29 05:45:40
【问题描述】：

目前我正在使用 React 开发一个简单的应用程序，我选择使用 Aphrodite 来处理我的 CSS。

但是我遇到了一个我找不到答案的问题，它正在处理奇数甚至伪选择器。有没有人举个例子说明如何使用 Aphrodite 来处理奇数 + 偶数 psuedo。

【问题讨论】：

标签： javascript html css reactjs aphrodite

【解决方案1】：

使用 Aphrodite，您可以在 js 中使用样式表，并且可以为对象键定义一个带有字符串表示形式的伪类。它看起来像这样

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

所以在使用 Aphrodite 时，您可以使用他们的 css 函数将其注入 <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!)

【讨论】：

【解决方案2】：

上面的答案是正确的，我没有意识到你能做的是这个..

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

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

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

这将用正确的颜色为每个偶数子着色。

【讨论】：