MUI pseudo-class last-of-type-CodePudding

I'm trying to get the the last <NotificationContainer> component to have a margin of 100px. My markup here doesn't work. I'm building using 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>
  )
}

CodePudding user response：

Looks like you just need to remove the space: "&:last-of-type"

That's the usual syntax for selectors like this in Material :)