React Aphrodite 奇数 + 偶数选择器

Question

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

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

Answer 1

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

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',
        }
    }
});

这将为每个 child 涂上正确的颜色。

React Aphrodite 奇数 + 偶数选择器

React Aphrodite Odd + Even Selectors

html

javascript

css

reactjs

aphrodite