Material UI 목록에서 폰트 크기를 변경하는 방법 (React) – 종합 가이드

Material UI에서 목록의 폰트 크기 변경하는 방법

ReactJS와 Material UI를 사용하여 폼을 생성하는 경우, 보다 간결한 프레젠테이션을 위해 목록의 폰트 크기를 사용자 정의할 수 있습니다. 그러나 단순히 다른 수준에서 코드 fontSize={10}를 추가하는 것만으로는 원하는 효과를 얻을 수 없을 수 있습니다. 이 블로그 포스트에서는 Material UI 목록에서 폰트 크기를 변경하는 다양한 방법을 살펴보겠습니다.

방법 1: primaryTypographyProps 사용하기

Material UI 버전 5에서는 primaryTypographyProps 속성을 사용하여 ListItemText 컴포넌트의 주요 텍스트에 원하는 스타일을 전달할 수 있습니다. 예를 확인해보겠습니다:

import ListItemText from '@mui/material/ListItemText';
  
// 컴포넌트 내부에서

<ListItemText
  primaryTypographyProps={{fontSize: '18px'}}
  primary="목록 텍스트"
/>

방법 2: 주요 텍스트 스타일 덮어쓰기

문서에 따르면, classes 속성과 ListItemText 컴포넌트의 primary 키를 사용하여 주요 텍스트 스타일을 덮어쓸 수 있습니다. 예를 확인해보겠습니다:

import { makeStyles } from '@mui/styles';
import ListItemText from '@mui/material/ListItemText';

const useStyles = makeStyles({
  listItemText: {
    fontSize: '0.7em', // 원하는 폰트 크기를 입력하세요
  }
});

// 컴포넌트 내부에서
const classes = useStyles();

<ListItemText
  classes={{ primary: classes.listItemText }}
  primary="수신함"
/>

방법 3: makeStyles로 스타일 적용하기

makeStyles 훅을 사용하여 스타일을 정의하고, 이를 ListItemText 컴포넌트에 적용할 수도 있습니다. 예를 확인해보겠습니다:

import { makeStyles } from '@mui/styles';
import ListItemText from '@mui/material/ListItemText';

const useStyles = makeStyles({
  item: {
    '& span, & svg': {
      fontSize: '3rem',
    }
  }
});

// 컴포넌트 내부에서
const classes = useStyles();

<ListItem>
  <ListItemText className={classes.item} primary="목록 텍스트" />
</ListItem>

방법 4: LinkItemText에서 Typography 비활성화하기

LinkItemText 컴포넌트를 사용하는 경우, 설정한 폰트 크기가 재정의되는 Typography 컴포넌트가 내부적으로 사용된다는 것을 알 수 있을 것입니다. 이를 우회하기 위해 disableTypography 속성을 사용할 수 있습니다. 예를 확인해보겠습니다:

import ListItemText from '@mui/material/ListItemText';

// 컴포넌트 내부에서
<ListItemText
  sx={{ fontSize: "..." }}
  disableTypography
>{text}</ListItemText>

이러한 방법들을 실험해보고 요구 사항에 맞게 폰트 크기를 조정해보세요. Material UI 목록을 사용자 정의하는 재미를 즐기세요!

참고 자료 : 

reactjs