[Material UI] Typography variant 커스텀 하는 방법

Intro

안녕하세요. 이번 시간에는 MUI Typography Component 에서 variant 속성을 커스텀 하는 방법에 대해 알아보겠습니다. 

 

MUI Typography variant

Typography 의 기본 variant 속성은 다음과 같습니다. h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2 가 있습니다. 이 외에도 직접 커스텀하여 variant를 추가하고 싶을 때가 있을 겁니다. 

const theme = createTheme({
  components: {
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          h1: 'h2',
          h2: 'h2',
          h3: 'h2',
          h4: 'h2',
          h5: 'h2',
          h6: 'h2',
          subtitle1: 'h2',
          subtitle2: 'h2',
          body1: 'span',
          body2: 'span',
        },
      },
    },
  },
});

 

How to do

 

Step 1. Update the theme's typography object

추가하고자 하는 variant name과 스타일 속성을 추가합니다. 

const theme = createTheme({
  typography: {
    poster: {
      fontSize: '4rem',
      color: 'red',
    },
    // Disable h3 variant
    h3: undefined,
  },
});

 

 

Step 2. (Optional) Set the default semantic element for your new variant

const theme = createTheme({
  typography: {
    poster: {
      fontSize: 64,
      color: 'red',
    },
    // Disable h3 variant
    h3: undefined,
  },
  components: {
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          // Map the new variant to render a <h1> by default
          poster: 'h1',
        },
      },
    },
  },
});

 

Step 3. Update the necessary typings (if you are using TypeScript)

타입스크립트를 사용한다면, 아래의 선언을 꼭 추가해줘야 합니다. 추가 안하면 오류가 나더라고요. 

declare module '@mui/material/styles' {
  interface TypographyVariants {
    poster: React.CSSProperties;
  }

  // allow configuration using `createTheme`
  interface TypographyVariantsOptions {
    poster?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    poster: true;
    h3: false;
  }
}

 

Step 4. You can now use the new variant

추가한 variant가 제대로 적용되었는지 확인해봅니다. 

<Typography variant="poster">poster</Typography>;

/* This variant is no longer supported. If you are using TypeScript it will give an error */
<Typography variant="h3">h3</Typography>;

 

Conclusion

처음에는 어떻게 커스텀을 해야 하는지 막막했는데, 역시 정답은 공식 문서에 나와 있었습니다 :-) !! 

 

---

https://mui.com/material-ui/customization/typography/#adding-amp-disabling-variants