风格化 mui@v5 中的兄弟选择器答案

【问题标题】：Sibling selector in styled mui@v5风格化 mui@v5 中的兄弟选择器
【发布时间】：2021-11-19 10:52:00
【问题描述】：

Todo：在 material-ui@v5 样式函数中实现同级选择器。

.root + .root {
    margin-top: 8px;
}

用material-ui@v4 makestyles实现同样的效果很简单。看看下面的代码：

    root: {
            width: '100%',
            '& + $root': {
                marginTop: spacing(1),
            },
        },

但我没有成功使用用于 styled() 的 mui new api。我已经尝试了一些替代方案，这样的东西会生成这样的代码。

const Root = styled(Box)(({ theme: { spacing } }) => ({
    [`& + .${Root}`]: {
        marginTop: spacing(1),
    },
}));

<style data-emotion="css" data-s="">.css-43e1lt+.NO_COMPONENT_SELECTOR{margin-top:8px;}</style>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

将情感的兄弟选择器与 mui 样式函数相结合，这就是我们可以使其工作的方式。

const Root = styled(Box)(({ theme: { spacing } }) => ({
    '& + &': {
        marginTop: spacing(1),
    },
}));

【讨论】：