Pular para o conteúdo

🎉 v5 is out! Head to the documentation to get started.

Dimensionando

Facilmente faça um elemento tão largo ou tão alto (relativo a seu pai) com os utilitários de largura e altura.

Valores suportados

As funções de estilo de dimensionamento suportam diferentes tipos de entrada de propriedade:

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%

Largura

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">

Altura

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';
Nome da importação Propriedade Propriedade CSS Chave do tema
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