DEV Community

artemismars
artemismars

Posted on

Material UI - Typography

How to import

import {Typography} from '@mui/material'
Enter fullscreen mode Exit fullscreen mode

How to use

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

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

Top comments (0)