尺寸

使用宽度和高度工具，轻松地使元素相对于其父元素一样宽或一样高。

支持的值

尺寸属性：width、height、minHeight、maxHeight、minWidth 和 maxWidth 对值使用以下自定义转换函数

function transform(value) {
  return value <= 1 && value !== 0 ? `${value * 100}%` : value;
}

如果值在 (0, 1] 之间，则将其转换为百分比。否则，它将直接设置在 CSS 属性上。

宽度 1/4

宽度 300

宽度 75%

宽度 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%

宽度

宽度 25%

宽度 50%

宽度 75%

宽度 100%

宽度 auto

<Box sx={{ width: '25%' }}>…
<Box sx={{ width: '50%' }}>…
<Box sx={{ width: '75%' }}>…
<Box sx={{ width: '100%' }}>…
<Box sx={{ width: 'auto' }}>…

最大宽度

最大宽度属性允许在断点上设置约束。在此示例中，该值解析为 theme.breakpoints.values.md。

<Box sx={{ maxWidth: 'md' }}>…

高度

高度 25%

高度 50%

高度 75%

高度 100%

<Box sx={{ height: '25%' }}>…
<Box sx={{ height: '50%' }}>…
<Box sx={{ height: '75%' }}>…
<Box sx={{ height: '100%' }}>…

API

import { sizing } from '@mui/system';

导入名称	属性	CSS 属性	主题键
`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