css - 阿芙罗狄蒂中的类>元素选择器

Question

如何在 aphrodite 中实现 >elemnt 选择器。我想将我的孩子 div 设置为宽度“100%”

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

但它不工作。

Answer 1

它有点破解解决方法，但我相信这应该适用于阿芙罗狄蒂：

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

它之所以有效，是因为如果您以“：”开始规则，Aphrodite 基本上会将任何内容逐字转换到它创建的样式标签中。

Answer 2

请改用 AphroditeJSS。它使用与 Aphrodite 相同的 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

Aphrodite 不支持嵌套元素样式。我建议使用 styled-components 或glamorous。