Question

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

然而，我遇到了一个我无法找到答案的问题，而且它处理奇数甚至是假的选择器。有没有人得到一个关于如何使用阿芙罗狄蒂处理奇数+偶数伪造的例子。

Answer 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!)

Answer 2

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

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

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

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

将使用正确的颜色为每个孩子上色。

React Aphrodite奇数+偶数选择器

2 个答案: