Класс> селектор элемента в афродите

Question

Как реализовать> Elemnt селектор в Афродите. Я хочу, чтобы стиль моего ребенка div на ширину "100%"

 inputContainer: {
        width: '100%',
        "> div": {
            width: '100%'
        }
    },

Но это не работает.

Answer 1

Это обходной путь, но я считаю, что это должно работать с Афродитой:

    ':nth-child(1n) > div': {
      width: '100%'
    },

Это работает, потому что Aphrodite в основном преобразует что-либо дословно в тег стиля, который он создает, если вы начинаете правило с ":".

Answer 2

Вместо этого используйте AphroditeJSS. Он использует тот же API, что и Aphrodite, и обрабатывает некоторые из недостатков Aphrodite, одним из которых является стиль потомков.

https://github.com/cssinjs/aphrodite-jss

npm i aphrodite-jss --save-dev

const inputCss = Stylesheet.create = ({
    inputContainer: {
        width: '100%',
        "> div": {
            width: '100%'
        }
    },
});

Answer 3

Афродита не поддерживает стилизацию вложенных элементов. Я бы предложил использовать стилевые компоненты или гламурный.