reactjs - 如何使用带有材质 ui 样式 api 的伪选择器？

Question

参考这个 api，到目前为止我的组件是这样的：

const ActionButton = styled(Button)({
    margin: '0 16px',
});

但是现在我想使用first-childandlast-child伪选择器，但我不完全确定如何使用这个特定的 API 来实现它。

我试过这样的事情：

const ActionButton = styled(Button)({
    margin: '0 16px',
    ':first-child': {
        marginLeft: 0,
    },
    ':last-child': {
        marginRight: 0,
    },
});

但这似乎不起作用。

有没有人尝试过这样的事情？

标签： reactjsmaterial-ui

Answer 1

我错过了最重要的部分：&.

const ActionButton = styled(Button)({
    margin: '0 16px',
    '&:first-child': {
        marginLeft: 0,
    },
    '&:last-child': {
        marginRight: 0,
    },
});