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