问样式为mui@v5的同级选择器
EN

Stack Overflow用户

提问于 2021-11-19 02:52:00

回答 1查看 77关注 0票数 0

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

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

要实现与material-ui@v4相同的功能，makestyles非常简单。看看下面的代码：

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

但是我没有成功地使用mui的新api for styled()。我已经尝试了一些替代方法，像这样的东西将生成这样的代码。

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

Stack Overflow用户

回答已采纳

发布于 2021-11-19 02:52:00

结合情感的兄弟选择器和mui风格的函数，这就是我们可以让它工作的方式。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70033666

复制

相似问题

问样式为mui@v5的同级选择器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问样式为mui@v5的同级选择器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问样式为mui@v5的同级选择器
EN