Sizing
Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.
Supported values
The sizing properties: width, height, minHeight, maxHeight, minWidth, and maxWidth are using the following custom transform function for the value:
function transform(value) {
return value <= 1 && value !== 0 ? `${value * 100}%` : value;
}
If the value is between [0, 1], it's converted to percent. Otherwise, it is directly set on the CSS property.
Width 1/4
Width 300
Width 75%
Width 1
<Box sx={{ width: 1/4 }}> // Equivalent to width: '25%'
<Box sx={{ width: 300 }}> // Numbers are converted to pixel values.
<Box sx={{ width: '75%' }}> // String values are used as raw CSS.
<Box sx={{ width: 1 }}> // 100%
Width
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<Box sx={{ width: '25%' }}>…
<Box sx={{ width: '50%' }}>…
<Box sx={{ width: '75%' }}>…
<Box sx={{ width: '100%' }}>…
<Box sx={{ width: 'auto' }}>…
Max-width
The max-width property allows setting a constraint on your breakpoints.
In this example, the value resolves to theme.breakpoints.values.md.
<Box sx={{ maxWidth: 'md' }}>…
Height
Height 25%
Height 50%
Height 75%
Height 100%
<Box sx={{ height: '25%' }}>…
<Box sx={{ height: '50%' }}>…
<Box sx={{ height: '75%' }}>…
<Box sx={{ height: '100%' }}>…
API
import { sizing } from '@mui/system';
| Import name | Prop | CSS property | Theme key |
|---|---|---|---|
width |
width |
width |
none |
maxWidth |
maxWidth |
max-width |
theme.breakpoints.values |
minWidth |
minWidth |
min-width |
none |
height |
height |
height |
none |
maxHeight |
maxHeight |
max-height |
none |
minHeight |
minHeight |
min-height |
none |
boxSizing |
boxSizing |
box-sizing |
none |