尺寸

使用寬度和高度工具，輕鬆地使元素寬度或高度（相對於其父元素）符合需求。

支援的值

尺寸屬性： 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';

匯入名稱	Prop	CSS 屬性	主題鍵
`寬度`	`寬度`	`寬度`	無
`maxWidth`	`maxWidth`	`max-width`	`theme.breakpoints.values`
`minWidth`	`minWidth`	`min-width`	無
`高度`	`高度`	`高度`	無
`maxHeight`	`maxHeight`	`max-height`	無
`minHeight`	`minHeight`	`min-height`	無
`boxSizing`	`boxSizing`	`box-sizing`	無