diff --git a/docs/pages/api-docs/table-footer.json b/docs/pages/api-docs/table-footer.json
index f3b843a0d17dfb..3feb421f4d8b8f 100644
--- a/docs/pages/api-docs/table-footer.json
+++ b/docs/pages/api-docs/table-footer.json
@@ -2,7 +2,8 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
-    "component": { "type": { "name": "elementType" } }
+    "component": { "type": { "name": "elementType" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "TableFooter",
   "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTableFooter" },
@@ -11,6 +12,6 @@
   "filename": "/packages/material-ui/src/TableFooter/TableFooter.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/tables/\">Tables</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }
diff --git a/docs/translations/api-docs/table-footer/table-footer.json b/docs/translations/api-docs/table-footer/table-footer.json
index a97666a1f27185..170e1b7f0c5c68 100644
--- a/docs/translations/api-docs/table-footer/table-footer.json
+++ b/docs/translations/api-docs/table-footer/table-footer.json
@@ -3,7 +3,8 @@
   "propDescriptions": {
     "children": "The content of the component, normally <code>TableRow</code>.",
     "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."
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "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." } }
 }
diff --git a/packages/material-ui/src/TableFooter/TableFooter.d.ts b/packages/material-ui/src/TableFooter/TableFooter.d.ts
index 79d08331b7660d..80f68df1ff50a4 100644
--- a/packages/material-ui/src/TableFooter/TableFooter.d.ts
+++ b/packages/material-ui/src/TableFooter/TableFooter.d.ts
@@ -1,4 +1,6 @@
+import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface TableFooterTypeMap<P = {}, D extends React.ElementType = 'tfoot'> {
@@ -14,6 +16,10 @@ export interface TableFooterTypeMap<P = {}, D extends React.ElementType = 'tfoot
       /** Styles applied to the root element. */
       root?: string;
     };
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }
diff --git a/packages/material-ui/src/TableFooter/TableFooter.js b/packages/material-ui/src/TableFooter/TableFooter.js
index 468814eb3a1e26..832ba67cb703a6 100644
--- a/packages/material-ui/src/TableFooter/TableFooter.js
+++ b/packages/material-ui/src/TableFooter/TableFooter.js
@@ -1,31 +1,62 @@
 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 Tablelvl2Context from '../Table/Tablelvl2Context';
+import useThemeProps from '../styles/useThemeProps';
+import experimentalStyled from '../styles/experimentalStyled';
+import { getTableFooterUtilityClass } from './tableFooterClasses';
 
-export const styles = {
-  /* Styles applied to the root element. */
-  root: {
-    display: 'table-footer-group',
-  },
+const overridesResolver = (props, styles) => styles.root || {};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes } = styleProps;
+
+  const slots = {
+    root: ['root'],
+  };
+
+  return composeClasses(slots, getTableFooterUtilityClass, classes);
 };
 
+const TableFooterRoot = experimentalStyled(
+  'tfoot',
+  {},
+  {
+    name: 'MuiTableFooter',
+    slot: 'Root',
+    overridesResolver,
+  },
+)({
+  /* Styles applied to the root element. */
+  display: 'table-footer-group',
+});
+
 const tablelvl2 = {
   variant: 'footer',
 };
 
 const defaultComponent = 'tfoot';
 
-const TableFooter = React.forwardRef(function TableFooter(props, ref) {
-  const { classes, className, component: Component = defaultComponent, ...other } = props;
+const TableFooter = React.forwardRef(function TableFooter(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiTableFooter' });
+  const { className, component = defaultComponent, ...other } = props;
+
+  const styleProps = {
+    ...props,
+    component,
+  };
+
+  const classes = useUtilityClasses(styleProps);
 
   return (
     <Tablelvl2Context.Provider value={tablelvl2}>
-      <Component
+      <TableFooterRoot
+        as={component}
         className={clsx(classes.root, className)}
         ref={ref}
-        role={Component === defaultComponent ? null : 'rowgroup'}
+        role={component === defaultComponent ? null : 'rowgroup'}
+        styleProps={styleProps}
         {...other}
       />
     </Tablelvl2Context.Provider>
@@ -54,6 +85,10 @@ TableFooter.propTypes = {
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiTableFooter' })(TableFooter);
+export default TableFooter;
diff --git a/packages/material-ui/src/TableFooter/TableFooter.test.js b/packages/material-ui/src/TableFooter/TableFooter.test.js
index ac34f555c9bc0a..75618416dc6802 100644
--- a/packages/material-ui/src/TableFooter/TableFooter.test.js
+++ b/packages/material-ui/src/TableFooter/TableFooter.test.js
@@ -1,32 +1,34 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
 import TableFooter from './TableFooter';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
+import classes from './tableFooterClasses';
 
 describe('<TableFooter />', () => {
   const mount = createMount();
-  let classes;
   const render = createClientRender();
 
   function renderInTable(node) {
     return render(<table>{node}</table>);
   }
 
-  before(() => {
-    classes = getClasses(<TableFooter />);
-  });
-
-  describeConformance(<TableFooter />, () => ({
+  describeConformanceV5(<TableFooter />, () => ({
     classes,
     inheritComponent: 'tfoot',
     mount: (node) => {
       const wrapper = mount(<table>{node}</table>);
       return wrapper.find('table').childAt(0);
     },
-
+    render: (node) => {
+      const { container, ...rest } = render(<table>{node}</table>);
+      return { container: container.firstChild, ...rest };
+    },
+    muiName: 'MuiTableFooter',
+    testVariantProps: { variant: 'foo' },
     refInstanceof: window.HTMLTableSectionElement,
     testComponentPropWith: 'thead',
+    skip: ['componentsProp'],
   }));
 
   it('should render children', () => {
diff --git a/packages/material-ui/src/TableFooter/index.d.ts b/packages/material-ui/src/TableFooter/index.d.ts
index cae5d63a35f354..9898556e0b2e59 100644
--- a/packages/material-ui/src/TableFooter/index.d.ts
+++ b/packages/material-ui/src/TableFooter/index.d.ts
@@ -1,2 +1,5 @@
 export { default } from './TableFooter';
 export * from './TableFooter';
+
+export { default as tableFooterClasses } from './tableFooterClasses';
+export * from './tableFooterClasses';
diff --git a/packages/material-ui/src/TableFooter/index.js b/packages/material-ui/src/TableFooter/index.js
index 2cbb49690c5870..4d3199f1bb616d 100644
--- a/packages/material-ui/src/TableFooter/index.js
+++ b/packages/material-ui/src/TableFooter/index.js
@@ -1 +1,4 @@
 export { default } from './TableFooter';
+
+export { default as tableFooterClasses } from './tableFooterClasses';
+export * from './tableFooterClasses';
diff --git a/packages/material-ui/src/TableFooter/tableFooterClasses.d.ts b/packages/material-ui/src/TableFooter/tableFooterClasses.d.ts
new file mode 100644
index 00000000000000..de46b8f37c3e77
--- /dev/null
+++ b/packages/material-ui/src/TableFooter/tableFooterClasses.d.ts
@@ -0,0 +1,7 @@
+import { TableFooterClassKey } from './TableFooter';
+
+declare const tableFooterClasses: Record<TableFooterClassKey, string>;
+
+export function getTableFooterUtilityClass(slot: string): string;
+
+export default tableFooterClasses;
diff --git a/packages/material-ui/src/TableFooter/tableFooterClasses.js b/packages/material-ui/src/TableFooter/tableFooterClasses.js
new file mode 100644
index 00000000000000..1c73c0a0c32ed0
--- /dev/null
+++ b/packages/material-ui/src/TableFooter/tableFooterClasses.js
@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getTableFooterUtilityClass(slot) {
+  return generateUtilityClass('MuiTableFooter', slot);
+}
+
+const tableFooterClasses = generateUtilityClasses('MuiTableFooter', ['root']);
+
+export default tableFooterClasses;