MUI 伪class 最后类型

Question

我正在尝试让最后一个 <NotificationContainer> 组件具有 100 像素的边距。我在这里的标记不起作用。我正在使用 MUI5 构建。

const Container = styled('div')(() => ({
  backgroundColor: 'white',
  border: `1px solid`,
  padding: '20px'
}));

const NotificationContainer = styled('div')(() => ({
  alignItems: 'center',
  border: `1px solid`,
  display: 'flex',
  marginBottom: '10px',
  "& :last-of-type": {
    marginBottom: "100px"
  }
}));

export const Page: React.FC = () => {
  return (
    <Container>
      <NotificationContainer>
        Applicant: Test
      </NotificationContainer>

      <NotificationContainer>
        Test 2
      </NotificationContainer>

      <NotificationContainer>
        Test 3
      </NotificationContainer>
    </Container>
  )
}

Answer 1

看来您只需要删除 space："&:last-of-type"

这是 Material 中这样的选择器的常用语法:)

MUI 伪class 最后类型

MUI pseudo-class last-of-type

reactjs

material-ui