diff --git a/docs/pages/material-ui/api/scoped-css-baseline.json b/docs/pages/material-ui/api/scoped-css-baseline.json index e23c5fffc5cdc7..557a0a93d5f413 100644 --- a/docs/pages/material-ui/api/scoped-css-baseline.json +++ b/docs/pages/material-ui/api/scoped-css-baseline.json @@ -3,7 +3,13 @@ "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, "component": { "type": { "name": "elementType" } }, - "enableColorScheme": { "type": { "name": "bool" } } + "enableColorScheme": { "type": { "name": "bool" } }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + } + } }, "name": "ScopedCssBaseline", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiScopedCssBaseline" }, diff --git a/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json b/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json index ed2a608eda1684..d9f702400d1950 100644 --- a/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json +++ b/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json @@ -4,7 +4,8 @@ "children": "The content of the component.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "component": "The component used for the root node. Either a string to use a HTML element or a component.", - "enableColorScheme": "Enable color-scheme CSS property to use theme.palette.mode. For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme For browser support, check out https://caniuse.com/?search=color-scheme" + "enableColorScheme": "Enable color-scheme CSS property to use theme.palette.mode. For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme For browser support, check out https://caniuse.com/?search=color-scheme", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } } } diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts index 3ca74a96b97f81..b9ea6c02a1c931 100644 --- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts +++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts @@ -1,4 +1,6 @@ +import { SxProps } from '@mui/system'; import * as React from 'react'; +import { Theme } from '../styles'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ScopedCssBaselineClasses } from './scopedCssBaselineClasses'; @@ -18,6 +20,10 @@ export interface ScopedCssBaselineTypeMap

; }; defaultComponent: D; } diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js index 9a34488ba9651a..6ae0f1783954ab 100644 --- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js +++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js @@ -84,6 +84,14 @@ ScopedCssBaseline.propTypes /* remove-proptypes */ = { * For browser support, check out https://caniuse.com/?search=color-scheme */ enableColorScheme: PropTypes.bool, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), }; export default ScopedCssBaseline; diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.spec.tsx b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.spec.tsx new file mode 100644 index 00000000000000..22cfa526d6aa3f --- /dev/null +++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.spec.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'; + + ({ + backgroundColor: theme.palette.background.paper, + })} +/>;