Material UI - Typography

#webdev

How to import

import {Typography} from '@mui/material'

How to use

<Typography 
  variant='h2' 
  component='h1'
  color='textSecondary'
>
  Some text here..
</Typography>

variant sets Typography components to be h2 tag in web page.
But there's a component prop.
component='h1'
This prop makes the tag to be h1.
But it will look like h2 in the page.
The reason is variant prop makes the component inherits CSS properties from h2 tag.

so the Typography component will be h1 looking like h2.

color prop has a value, textSecondary.
This value name is set by MUI. They specified some color names.
Check the color names in the following link below.

Palette
https://mui.com/material-ui/customization/palette/#palette-colors

Color
https://mui.com/material-ui/customization/color/#2014-material-design-color-palettes