[Table] Migrate TableCell to emotion (#24663)

docs/pages/api-docs/table-cell.json

@@ -21,6 +21,7 @@
     "sortDirection": {
       "type": { "name": "enum", "description": "'asc'<br>&#124;&nbsp;'desc'<br>&#124;&nbsp;false" }
     },
+    "sx": { "type": { "name": "object" } },
     "variant": {
       "type": {
         "name": "enum",
@@ -36,6 +37,7 @@
       "body",
       "footer",
       "sizeSmall",
+      "sizeMedium",
       "paddingCheckbox",
       "paddingNone",
       "alignLeft",
@@ -52,6 +54,6 @@
   "filename": "/packages/material-ui/src/TableCell/TableCell.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/tables/\">Tables</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/performance/table-emotion.js

@@ -1,22 +1,25 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
+// import { experimentalStyled as styled } from '@material-ui/core/styles';
 import NoSsr from '@material-ui/core/NoSsr';
 
 const createComponent = (defaultComponent) => {
+  const Root = styled('div')`
+    background: pink;
+  `;
+
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {
-    const { component: Component = defaultComponent, ...other } = props;
+    const { component = defaultComponent, ...other } = props;
 
-    return <Component ref={ref} {...other} />;
+    return <Root as={component} ref={ref} {...other} />;
   });
 
   MyComponent.propTypes = {
     component: PropTypes.elementType,
   };
 
-  return styled(MyComponent)`
-    background: pink;
-  `;
+  return MyComponent;
 };
 
 const Table = createComponent('table');

docs/translations/api-docs/table-cell/table-cell.json

@@ -9,6 +9,7 @@
     "scope": "Set scope attribute.",
     "size": "Specify the size of the cell. The prop defaults to the value (<code>&#39;medium&#39;</code>) inherited from the parent Table component.",
     "sortDirection": "Set aria-sort direction.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
     "variant": "Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components."
   },
   "classDescriptions": {
@@ -33,6 +34,11 @@
       "nodeName": "the root element",
       "conditions": "<code>size=\"small\"</code>"
     },
+    "sizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
     "paddingCheckbox": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

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

@@ -1,5 +1,5 @@
-import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 

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

@@ -1,5 +1,5 @@
-import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 import { SwitchBaseProps } from '../internal/SwitchBase';
 

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

@@ -1,5 +1,5 @@
-import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 
 export interface CircularProgressProps

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

@@ -1,5 +1,5 @@
-import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 

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

@@ -1,5 +1,5 @@
-import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 
 export interface ImageListItemBarProps

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

@@ -1,5 +1,5 @@
-import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TypographyProps } from '../Typography';
 

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

@@ -1,5 +1,5 @@
-import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 
 export interface StepProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {

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

@@ -1,5 +1,5 @@
-import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { Theme } from '..';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';

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

@@ -1,5 +1,5 @@
-import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 
 export interface TabScrollButtonProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {

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

@@ -1,5 +1,5 @@
-import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 

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

@@ -1,5 +1,5 @@
-import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 import { Padding, Size } from '../Table';
 
 export { Padding, Size };
@@ -39,6 +40,8 @@ export interface TableCellProps extends StandardProps<TableCellBaseProps, 'align
     footer?: string;
     /** Styles applied to the root element if `size="small"`. */
     sizeSmall?: string;
+    /** Styles applied to the root element if `size="medium"`. */
+    sizeMedium?: string;
     /** Styles applied to the root element if `padding="checkbox"`. */
     paddingCheckbox?: string;
     /** Styles applied to the root element if `padding="none"`. */
@@ -77,6 +80,10 @@ export interface TableCellProps extends StandardProps<TableCellBaseProps, 'align
    * Set aria-sort direction.
    */
   sortDirection?: SortDirection;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
   /**
    * Specify the cell type.
    * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.