Framework/React

[Material UI] Typography variant ์ปค์Šคํ…€ ํ•˜๋Š” ๋ฐฉ๋ฒ•

yuri lee 2023. 7. 10. 23:07
๋ฐ˜์‘ํ˜•

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

๋ฐ˜์‘ํ˜•