Tipografia
Documentação e exemplos de texto, utilizações comuns para controlar o alinhamento, quebra, peso e muito mais.
Alinhamento do texto
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.
Left aligned text.
Center aligned text.
Right aligned text.
Light
Regular
Medium
500
Bold
<Box fontWeight="fontWeightLight">…
<Box fontWeight="fontWeightRegular">…
<Box fontWeight="fontWeightMedium">…
<Box fontWeight={500}>…
<Box fontWeight="fontWeightBold">…
Tamanho da fonte
Default
h6.fontSize
16px
Normal font style.
Italic font Style.
Oblique font style.
Default
Monospace
Letter Spacing 6px.
Letter Spacing 10px.
Normal height.
line-height: 2
<Box lineHeight="normal">…
<Box lineHeight={10}>…
API
import { typography } from '@material-ui/system';
Nome da importação | Propriedade | Propriedade CSS | Chave do tema |
---|---|---|---|
fontFamily |
fontFamily |
font-family |
typography |
fontSize |
fontSize |
font-size |
typography |
fontStyle |
fontStyle |
font-style |
typography |
fontWeight |
fontWeight |
font-weight |
typography |
letterSpacing |
letterSpacing |
letter-spacing |
none |
lineHeight |
lineHeight |
line-height |
none |
textAlign |
textAlign |
text-align |
none |