[Table] Migrate TablePagination to emotion

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

@@ -28,7 +28,8 @@
     },
     "SelectProps": { "type": { "name": "object" }, "default": "{}" },
     "showFirstButton": { "type": { "name": "bool" } },
-    "showLastButton": { "type": { "name": "bool" } }
+    "showLastButton": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "TablePagination",
   "styles": {
@@ -53,6 +54,6 @@
   "filename": "/packages/material-ui/src/TablePagination/TablePagination.js",
   "inheritance": { "component": "TableCell", "pathname": "/api/table-cell/" },
   "demos": "<ul><li><a href=\"/components/tables/\">Tables</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -17,7 +17,8 @@
     "rowsPerPageOptions": "Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed.",
     "SelectProps": "Props applied to the rows per page <a href=\"/api/select/\"><code>Select</code></a> element.",
     "showFirstButton": "If <code>true</code>, show the first-page button.",
-    "showLastButton": "If <code>true</code>, show the last-page button."
+    "showLastButton": "If <code>true</code>, show the last-page button.",
+    "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."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },
@@ -35,7 +36,7 @@
     },
     "selectRoot": {
       "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Select component root element"
+      "nodeName": "the Select component `root` element"
     },
     "select": {
       "description": "Styles applied to {{nodeName}}.",
@@ -47,7 +48,7 @@
     },
     "input": {
       "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the InputBase component"
+      "nodeName": "the Select component `root` element"
     },
     "menuItem": {
       "description": "Styles applied to {{nodeName}}.",

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
+import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { TablePaginationActionsProps } from './TablePaginationActions';
 import { TableCellProps } from '../TableCell';
@@ -37,13 +39,13 @@ export interface TablePaginationTypeMap<P, D extends React.ElementType> {
         spacer?: string;
         /** Styles applied to the select label Typography element. */
         selectLabel?: string;
-        /** Styles applied to the Select component root element. */
+        /** Styles applied to the Select component `root` element. */
         selectRoot?: string;
         /** Styles applied to the Select component `select` class. */
         select?: string;
         /** Styles applied to the Select component `icon` class. */
         selectIcon?: string;
-        /** Styles applied to the InputBase component. */
+        /** Styles applied to the Select component `root` element. */
         input?: string;
         /** Styles applied to the MenuItem component. */
         menuItem?: string;
@@ -135,6 +137,10 @@ export interface TablePaginationTypeMap<P, D extends React.ElementType> {
        * @default false
        */
       showLastButton?: boolean;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps<Theme>;
     };
   defaultComponent: D;
 }