Sizing
Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.
Supported values
The sizing style functions support different property input type:
Width 1/4
Width 300
Width 75%
Width 1
<Box width={1/4}> // Números em [0,1] são multiplicados por 100 e convertido em % valores.
<Box width={300}> // Números são convertidos em valores de pixel.
<Box width="75%"> // Valores de string são usados como CSS bruto.
<Box width={1}> // 100%Width
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<Box width="25%">…
<Box width="50%">…
<Box width="75%">…
<Box width="100%">…
<Box width="auto">…Height
Height 25%
Height 50%
Height 75%
Height 100%
<Box height="25%">…
<Box height="50%">…
<Box height="75%">…
<Box height="100%">…API
import { sizing } from '@material-ui/system';| Импорт | Свойство | Свойство CSS | В теме |
|---|---|---|---|
width |
width |
width |
none |
maxWidth |
maxWidth |
max-width |
none |
minWidth |
minWidth |
min-width |
none |
height |
height |
height |
none |
maxHeight |
maxHeight |
max-height |
none |
minHeight |
minHeight |
min-height |
none |
boxSizing |
boxSizing |
box-sizing |
none |