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';
+
+