В настоящее время я разрабатываю простое приложение с React, я решил использовать Aphrodite для обработки моего CSS.

Однако я столкнулся с проблемой, для которой я не могу найти ответ, и она обрабатывает нечетные и даже псевдо-селекторы. Кто-нибудь получил пример использования Aphrodite для обработки нечетных + четных псевдо?

0
Ash._ 28 Май 2017 в 23:01

2 ответа

Лучший ответ

В 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 (включая псевдо-классы!)

0
John Ruddell 28 Май 2017 в 20:12

Приведенный выше ответ является правильным, я не понял, что вы можете сделать, это ..

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

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

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

Который будет окрашивать каждого четного ребенка в правильный цвет.

0
Ash._ 28 Май 2017 в 21:45