[MUI] <Typography /> 두줄만 보이게 하기, 두줄 이후로는 ... 으로 표시하기

MUI + styled-components로 구현하였습니다.

<Name variant="body1">
    코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로
    맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다
</Name>


const Name = styled(Typography)`
  display: -webkit-box; /* 플렉스 박스처럼 동작 */
  -webkit-box-orient: vertical; /* 수직 방향으로 텍스트 정렬 */
  overflow: hidden; /* 넘치는 텍스트 숨김 */
  -webkit-line-clamp: 2; /* 최대 2줄까지만 표시 */
  text-overflow: ellipsis; /* 잘린 텍스트 뒤에 '...' 추가 */
`;