[CssBaseline] Migrate ScopedCssBaseline to emotion (#25541)

docs/pages/api-docs/scoped-css-baseline.json

@@ -1,7 +1,8 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "component": { "type": { "name": "elementType" } }
   },
   "name": "ScopedCssBaseline",
   "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiScopedCssBaseline" },
@@ -10,6 +11,6 @@
   "filename": "/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/css-baseline/\">Css Baseline</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json

@@ -2,7 +2,8 @@
   "componentDescription": "",
   "propDescriptions": {
     "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."
+    "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."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
 }

packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.d.ts

@@ -1,22 +1,42 @@
 import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '..';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-export type ScopedCssBaselineClassKey = keyof NonNullable<ScopedCssBaselineProps['classes']>;
-
-export interface ScopedCssBaselineProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
-  /**
-   * The content of the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: {
-    /** Styles applied to the root element. */
-    root?: string;
+export interface ScopedCssBaselineTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: {
+      /** Styles applied to the root element. */
+      root?: string;
+    };
   };
+  defaultComponent: D;
 }
+/**
+ *
+ * Demos:
+ *
+ * - [Css Baseline](https://material-ui.com/components/css-baseline/)
+ *
+ * API:
+ *
+ * - [ScopedCssBaseline API](https://material-ui.com/api/scoped-css-baseline/)
+ */
+declare const ScopedCssBaseline: OverridableComponent<ScopedCssBaselineTypeMap>;
+
+export type ScopedCssBaselineClassKey = keyof NonNullable<
+  ScopedCssBaselineTypeMap['props']['classes']
+>;
+
+export type ScopedCssBaselineProps<
+  D extends React.ElementType = ScopedCssBaselineTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<ScopedCssBaselineTypeMap<P, D>, D>;
 
 /**
  *
@@ -28,4 +48,4 @@ export interface ScopedCssBaselineProps
  *
  * - [ScopedCssBaseline API](https://material-ui.com/api/scoped-css-baseline/)
  */
-export default function ScopedCssBaseline(props: ScopedCssBaselineProps): JSX.Element;
+export default ScopedCssBaseline;

packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js

@@ -1,27 +1,66 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import useThemeProps from '../styles/useThemeProps';
+import experimentalStyled from '../styles/experimentalStyled';
 import { html, body } from '../CssBaseline/CssBaseline';
+import { getScopedCssBaselineUtilityClass } from './scopedCssBaselineClasses';
 
-export const styles = (theme) => ({
+const overridesResolver = (props, styles) => {
+  return styles.root || {};
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes } = styleProps;
+
+  const slots = {
+    root: ['root'],
+  };
+
+  return composeClasses(slots, getScopedCssBaselineUtilityClass, classes);
+};
+
+const ScopedCssBaselineRoot = experimentalStyled(
+  'div',
+  {},
+  {
+    name: 'MuiScopedCssBaseline',
+    slot: 'Root',
+    overridesResolver,
+  },
+)(({ theme }) => ({
   /* Styles applied to the root element. */
-  root: {
-    ...html,
-    ...body(theme),
-    '& *, & *::before, & *::after': {
-      boxSizing: 'inherit',
-    },
-    '& strong, & b': {
-      fontWeight: theme.typography.fontWeightBold,
-    },
+  ...html,
+  ...body(theme),
+  '& *, & *::before, & *::after': {
+    boxSizing: 'inherit',
   },
-});
+  '& strong, & b': {
+    fontWeight: theme.typography.fontWeightBold,
+  },
+}));
+
+const ScopedCssBaseline = React.forwardRef(function ScopedCssBaseline(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiScopedCssBaseline' });
+  const { className, component = 'div', ...other } = props;
 
-const ScopedCssBaseline = React.forwardRef(function ScopedCssBaseline(props, ref) {
-  const { classes, className, ...other } = props;
+  const styleProps = {
+    ...props,
+    component,
+  };
 
-  return <div className={clsx(classes.root, className)} ref={ref} {...other} />;
+  const classes = useUtilityClasses(styleProps);
+
+  return (
+    <ScopedCssBaselineRoot
+      as={component}
+      className={clsx(classes.root, className)}
+      ref={ref}
+      styleProps={styleProps}
+      {...other}
+    />
+  );
 });
 
 ScopedCssBaseline.propTypes /* remove-proptypes */ = {
@@ -41,6 +80,11 @@ ScopedCssBaseline.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
 };
 
-export default withStyles(styles, { name: 'MuiScopedCssBaseline' })(ScopedCssBaseline);
+export default ScopedCssBaseline;

packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.test.js

@@ -1,20 +1,21 @@
 import * as React from 'react';
-import { getClasses, createMount, describeConformance } from 'test/utils';
-import ScopedCssBaseline from './ScopedCssBaseline';
+import { createMount, describeConformanceV5, createClientRender } from 'test/utils';
+import ScopedCssBaseline, {
+  scopedCssBaselineClasses as classes,
+} from '@material-ui/core/ScopedCssBaseline';
 
 describe('<ScopedCssBaseline />', () => {
+  const render = createClientRender();
   const mount = createMount();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<ScopedCssBaseline />);
-  });
-
-  describeConformance(<ScopedCssBaseline />, () => ({
+  describeConformanceV5(<ScopedCssBaseline />, () => ({
     classes,
     inheritComponent: 'div',
     mount,
+    render,
+    muiName: 'MuiScopedCssBaseline',
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    testComponentPropWith: 'span',
+    skip: ['componentsProp', 'themeVariants'],
   }));
 });

packages/material-ui/src/ScopedCssBaseline/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './ScopedCssBaseline';
 export * from './ScopedCssBaseline';
+
+export { default as scopedCssBaselineClasses } from './scopedCssBaselineClasses';
+export * from './scopedCssBaselineClasses';

packages/material-ui/src/ScopedCssBaseline/index.js

@@ -1 +1,4 @@
 export { default } from './ScopedCssBaseline';
+
+export { default as scopedCssBaselineClasses } from './scopedCssBaselineClasses';
+export * from './scopedCssBaselineClasses';

packages/material-ui/src/ScopedCssBaseline/scopedCssBaselineClasses.d.ts

@@ -0,0 +1,7 @@
+import { ScopedCssBaselineClassKey } from './ScopedCssBaseline';
+
+declare const ScopedCssBaselineClasses: Record<ScopedCssBaselineClassKey, string>;
+
+export function getScopedCssBaselineUtilityClass(slot: string): string;
+
+export default ScopedCssBaselineClasses;

packages/material-ui/src/ScopedCssBaseline/scopedCssBaselineClasses.js

@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getScopedCssBaselineUtilityClass(slot) {
+  return generateUtilityClass('MuiScopedCssBaseline', slot);
+}
+
+const ScopedCssBaselineClasses = generateUtilityClasses('MuiScopedCssBaseline', ['root']);
+
+export default ScopedCssBaselineClasses;