import : 
import Typography from '@mui/material/Typography'; 

config.layout.tsx : setting style
const theme = createTheme ({
      palette :themePalette,
      typography : {
           allVariants : {
                  fontFamily : 'var(--family-default)',
                  fontWeight : 'var(--fw-normal)',
            },
           h1 : { fontSize :'var(--typo-xxl)', },
           h2 : { fontSize :'var(--typo-xl)', },
           h3 : { fontSize :'var(--typo-lg)', },
           h4 : { fontSize :'var(--typo-md)', },
           h5 : { fontSize :'var(--typo-sm)', },
           h6 : { fontSize :'var(--typo-default)', },
           subtitle1 : { fontSize : 'var(--typo-sm)', fontWeight : 'var(--fw-bold)', },
           subtitle2 : { fontSize : 'var(--typo-default)', fontWeight : 'var(--fw-bold)', },
           body1 : { fontSize : 'var(--typo-default)', margin : '0 0 1rem', },
           body2 : { fontSize : 'var(--typo-default)', },
           caption : { fontSize : 'var(--typo-xs)', },
      },
      components : {
            MuiTypography : {
                  defaultProps : {
                       variantMapping : {
                              subtitle1 :'strong' ,
                              subtitle2 :'strong' ,
                              body1 :'p' ,
                              body2 :'span' ,
                              caption :'small' ,
                        },
                  },
                  styleOverrides : {
                       root : {
                              transition :'var(--transition)' ,
                              color :'var(--color-default)' ,
                        },
                  },
            },
      },
});

variant : HTML tags & size (default)
h1. Heading
<Typography variant="h1" > h1. Heading </Typography>
h2. Heading
<Typography variant="h2" > h2. Heading </Typography>
h3. Heading
<Typography variant="h3" > h3. Heading </Typography>
h4. Heading
<Typography variant="h4" > h4. Heading </Typography>
h5. Heading
<Typography variant="h5" > h5. Heading </Typography>
h6. Heading
<Typography variant="h6" > h6. Heading </Typography>
subtitle1. strong
<Typography variant="subtitle1" > subtitle1. strong </Typography>
subtitle2. strong
<Typography variant="subtitle2" > subtitle2. strong </Typography>
body1. p
<Typography variant="body1" > body1. p </Typography>
body2. span
<Typography variant="body2" > body2. span </Typography>
caption. small
<Typography variant="caption" > caption. small </Typography>
body1. p
<Typography > body1. p </Typography>
body1. p strong
<Typography > <strong> body1. p </strong> </Typography>

component : HTML custom - tags
tags. h1
<Typography component="h1" > tags. h1 </Typography>
tags. h2
<Typography component="h2" > tags. h2 </Typography>
tags. h3
<Typography component="h3" > tags. h3 </Typography>
tags. h4
<Typography component="h4" > tags. h4 </Typography>
tags. h5
<Typography component="h5" > tags. h5 </Typography>
tags. h6
<Typography component="h6" > tags. h6 </Typography>

component : HTML custom - tags & font size
tags = h2 / size = h1
<Typography variant="h2" component="h1" > tags = h2 / size = h1 </Typography>
tags = h2 / size = h2
<Typography variant="h2" component="h2" > tags = h2 / size = h2 </Typography>
tags = h2 / size = h3
<Typography variant="h2" component="h3" > tags = h2 / size = h3 </Typography>
tags = h2 / size = h4
<Typography variant="h2" component="h4" > tags = h2 / size = h4 </Typography>
tags = h2 / size = h5
<Typography variant="h2" component="h5" > tags = h2 / size = h5 </Typography>
tags = h2 / size = h6
<Typography variant="h2" component="h6" > tags = h2 / size = h6 </Typography>

component : text-align
text left
<Typography variant="h2" align="left" > text left </Typography>
text center
<Typography variant="h2" align="center" > text center </Typography>
text right
<Typography variant="h2" align="right" > text right </Typography>

component : text-color
text color primary
<Typography variant="h6" className="text-primary" > text color primary </Typography>
text color primary-light
<Typography variant="h6" className="text-primary-light" > text color primary-light </Typography>
text color primary-dark
<Typography variant="h6" className="text-primary-dark" > text color primary-dark </Typography>
text color secondary
<Typography variant="h6" className="text-secondary" > text color secondary </Typography>
text color secondary-light
<Typography variant="h6" className="text-secondary-light" > text color secondary-light </Typography>
text color secondary-dark
<Typography variant="h6" className="text-secondary-dark" > text color secondary-dark </Typography>
text color error
<Typography variant="h6" className="text-error" > text color error </Typography>
text color error-light
<Typography variant="h6" className="text-error-light" > text color error-light </Typography>
text color error-dark
<Typography variant="h6" className="text-error-dark" > text color error-dark </Typography>
text color warning
<Typography variant="h6" className="text-warning" > text color warning </Typography>
text color warning-light
<Typography variant="h6" className="text-warning-light" > text color warning-light </Typography>
text color warning-dark
<Typography variant="h6" className="text-warning-dark" > text color warning-dark </Typography>
text color success
<Typography variant="h6" className="text-success" > text color success </Typography>
text color success-light
<Typography variant="h6" className="text-success-light" > text color success-light </Typography>
text color success-dark
<Typography variant="h6" className="text-success-dark" > text color success-dark </Typography>
text color light
<Typography variant="h6" className="text-light" > text color light </Typography>
text color black
<Typography variant="h6" className="text-black" > text color black </Typography>
text color dark
<Typography variant="h6" className="text-dark" > text color dark </Typography>
text color default
<Typography variant="h6" className="text-default" > text color default </Typography>
text color gray
<Typography variant="h6" className="text-gray" > text color gray </Typography>
text color border
<Typography variant="h6" className="text-border" > text color border </Typography>
text color snow
<Typography variant="h6" className="text-snow" > text color snow </Typography>