diff --git a/docs/src/pages/system/api/api.md b/docs/src/pages/system/api/api.md index 56c3d679692417..7be57dfdd4cce3 100644 --- a/docs/src/pages/system/api/api.md +++ b/docs/src/pages/system/api/api.md @@ -38,6 +38,7 @@ | [sizing](/system/sizing/) | `minHeight` | `minHeight`| `min-height` | none | | [sizing](/system/sizing/) | `minWidth` | `minWidth` | `min-width` | none | | [sizing](/system/sizing/) | `width` | `width` | `width` | none | +| [sizing](/system/sizing/) | `boxSizing` | `boxSizing` | `box-sizing` | none | | [spacing](/system/spacing/) | `spacing` | `m` | `margin` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | | [spacing](/system/spacing/) | `spacing` | `mb` | `margin-bottom` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | | [spacing](/system/spacing/) | `spacing` | `ml` | `margin-left` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | diff --git a/docs/src/pages/system/sizing/sizing.md b/docs/src/pages/system/sizing/sizing.md index 1573143f940b25..b68587840090d7 100644 --- a/docs/src/pages/system/sizing/sizing.md +++ b/docs/src/pages/system/sizing/sizing.md @@ -52,3 +52,4 @@ import { sizing } from '@material-ui/system'; | `height` | `height` | `height` | none | | `maxHeight` | `maxHeight`| `max-height` | none | | `minHeight` | `minHeight`| `min-height` | none | +| `boxSizing` | `boxSizing`| `box-sizing` | none | diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index 459f49406acbe4..7bb156580bef1d 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -122,6 +122,7 @@ export const maxHeight: SimpleStyleFunction<'maxHeight'>; export const minHeight: SimpleStyleFunction<'minHeight'>; export const sizeWidth: SimpleStyleFunction<'sizeWidth'>; export const sizeHeight: SimpleStyleFunction<'sizeHeight'>; +export const boxSizing: SimpleStyleFunction<'boxSizing'>; export const sizing: SimpleStyleFunction< | 'width' | 'maxWidth' @@ -131,6 +132,7 @@ export const sizing: SimpleStyleFunction< | 'minHeight' | 'sizeWidth' | 'sizeHeight' + | 'boxSizing' >; export type SizingProps = PropsFor; diff --git a/packages/material-ui-system/src/sizing.js b/packages/material-ui-system/src/sizing.js index bfcb69b041e62a..bf9c80b3e3d034 100644 --- a/packages/material-ui-system/src/sizing.js +++ b/packages/material-ui-system/src/sizing.js @@ -47,6 +47,10 @@ export const sizeHeight = style({ transform, }); +export const boxSizing = style({ + prop: 'boxSizing', +}); + const sizing = compose( width, maxWidth, @@ -54,6 +58,7 @@ const sizing = compose( height, maxHeight, minHeight, + boxSizing, ); export default sizing;