[ScopedCssBaseline] Add sx typings (#33474)

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&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      }
+    }
   },
   "name": "ScopedCssBaseline",
   "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiScopedCssBaseline" },

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 <a href=\"#css\">CSS API</a> 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 <code>color-scheme</code> CSS property to use <code>theme.palette.mode</code>. For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>"
+    "enableColorScheme": "Enable <code>color-scheme</code> CSS property to use <code>theme.palette.mode</code>. For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
 }

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<P = {}, D extends React.ElementType =
      * For browser support, check out https://caniuse.com/?search=color-scheme
      */
     enableColorScheme?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }

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;

packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.spec.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
+
+<ScopedCssBaseline
+  sx={(theme) => ({
+    backgroundColor: theme.palette.background.paper,
+  })}
+/>;