1

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

但是我遇到了一个我找不到答案的问题，它正在处理奇数甚至伪选择器。有没有人有一个关于如何使用阿芙罗狄蒂来处理奇数 + 偶数假的例子。

4

2 回答 2

0

使用 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>

这是一个很棒的视频，展示了如何使用 Aphrodite（包括伪类！）

于 2017-05-28T20:06:31.360 回答
0

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

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

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

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

这将为每个均匀的孩子涂上正确的颜色。

于 2017-05-28T21:45:40.597 回答