diff --git a/docs/pages/api-docs/table-container.json b/docs/pages/api-docs/table-container.json
index 950abe5730e42d..0b72a0b83cd4b6 100644
--- a/docs/pages/api-docs/table-container.json
+++ b/docs/pages/api-docs/table-container.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": "TableContainer",
"styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTableContainer" },
@@ -11,6 +12,6 @@
"filename": "/packages/material-ui/src/TableContainer/TableContainer.js",
"inheritance": null,
"demos": "
",
- "styledComponent": false,
+ "styledComponent": true,
"cssComponent": false
}
diff --git a/docs/translations/api-docs/table-container/table-container.json b/docs/translations/api-docs/table-container/table-container.json
index d2c2d1ad71074a..e9f75a7479c581 100644
--- a/docs/translations/api-docs/table-container/table-container.json
+++ b/docs/translations/api-docs/table-container/table-container.json
@@ -3,7 +3,8 @@
"propDescriptions": {
"children": "The content of the component, normally Table
.",
"classes": "Override or extend the styles applied to the component. See CSS API 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 `sx` page for more details."
},
"classDescriptions": { "root": { "description": "Styles applied to the root element." } }
}
diff --git a/packages/material-ui/src/TableContainer/TableContainer.d.ts b/packages/material-ui/src/TableContainer/TableContainer.d.ts
index 3ed1e5e399b715..436e0908451e67 100644
--- a/packages/material-ui/src/TableContainer/TableContainer.d.ts
+++ b/packages/material-ui/src/TableContainer/TableContainer.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 TableContainerTypeMap {
@@ -14,6 +16,10 @@ export interface TableContainerTypeMap
styles.root || {};
+
+const useUtilityClasses = (styleProps) => {
+ const { classes } = styleProps;
+
+ const slots = {
+ root: ['root'],
+ };
+
+ return composeClasses(slots, getTableContainerUtilityClass, classes);
};
-const TableContainer = React.forwardRef(function TableContainer(props, ref) {
- const { classes, className, component: Component = 'div', ...other } = props;
+const TableContainerRoot = experimentalStyled(
+ 'div',
+ {},
+ {
+ name: 'MuiTableContainer',
+ slot: 'Root',
+ overridesResolver,
+ },
+)({
+ /* Styles applied to the root element. */
+ width: '100%',
+ overflowX: 'auto',
+});
+
+const TableContainer = React.forwardRef(function TableContainer(inProps, ref) {
+ const props = useThemeProps({ props: inProps, name: 'MuiTableContainer' });
+ const { className, component = 'div', ...other } = props;
+
+ const styleProps = {
+ ...props,
+ component,
+ };
- return ;
+ const classes = useUtilityClasses(styleProps);
+
+ return (
+
+ );
});
TableContainer.propTypes = {
@@ -39,6 +76,10 @@ TableContainer.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: 'MuiTableContainer' })(TableContainer);
+export default TableContainer;
diff --git a/packages/material-ui/src/TableContainer/TableContainer.test.js b/packages/material-ui/src/TableContainer/TableContainer.test.js
index be6115226bf6c8..049689f6a500f0 100644
--- a/packages/material-ui/src/TableContainer/TableContainer.test.js
+++ b/packages/material-ui/src/TableContainer/TableContainer.test.js
@@ -1,20 +1,19 @@
import * as React from 'react';
-import { getClasses, createMount, describeConformance } from 'test/utils';
+import { createMount, describeConformanceV5 } from 'test/utils';
import TableContainer from './TableContainer';
+import classes from './tableContainerClasses';
describe('', () => {
const mount = createMount();
- let classes;
- before(() => {
- classes = getClasses();
- });
-
- describeConformance(, () => ({
+ describeConformanceV5(, () => ({
classes,
inheritComponent: 'div',
mount,
+ muiName: 'MuiTableContainer',
+ testVariantProps: { variant: 'foo' },
refInstanceof: window.HTMLDivElement,
testComponentPropWith: 'span',
+ skip: ['componentsProp'],
}));
});
diff --git a/packages/material-ui/src/TableContainer/index.d.ts b/packages/material-ui/src/TableContainer/index.d.ts
index 16d9e906fa092b..509adcea1ae86a 100644
--- a/packages/material-ui/src/TableContainer/index.d.ts
+++ b/packages/material-ui/src/TableContainer/index.d.ts
@@ -1,2 +1,5 @@
export { default } from './TableContainer';
export * from './TableContainer';
+
+export { default as tableContainerClasses } from './tableContainerClasses';
+export * from './tableContainerClasses';
diff --git a/packages/material-ui/src/TableContainer/index.js b/packages/material-ui/src/TableContainer/index.js
index 891964a7c8afa3..094fb1fd2e1fb4 100644
--- a/packages/material-ui/src/TableContainer/index.js
+++ b/packages/material-ui/src/TableContainer/index.js
@@ -1 +1,4 @@
export { default } from './TableContainer';
+
+export { default as tableContainerClasses } from './tableContainerClasses';
+export * from './tableContainerClasses';
diff --git a/packages/material-ui/src/TableContainer/tableContainerClasses.d.ts b/packages/material-ui/src/TableContainer/tableContainerClasses.d.ts
new file mode 100644
index 00000000000000..482888119d2845
--- /dev/null
+++ b/packages/material-ui/src/TableContainer/tableContainerClasses.d.ts
@@ -0,0 +1,9 @@
+export interface TableContainerClasses {
+ root: string;
+}
+
+declare const tableContainerClasses: TableContainerClasses;
+
+export function getTableContainerUtilityClass(slot: string): string;
+
+export default tableContainerClasses;
diff --git a/packages/material-ui/src/TableContainer/tableContainerClasses.js b/packages/material-ui/src/TableContainer/tableContainerClasses.js
new file mode 100644
index 00000000000000..9db5137d2758f1
--- /dev/null
+++ b/packages/material-ui/src/TableContainer/tableContainerClasses.js
@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getTableContainerUtilityClass(slot) {
+ return generateUtilityClass('MuiTableContainer', slot);
+}
+
+const tableContainerClasses = generateUtilityClasses('MuiTableContainer', ['root']);
+
+export default tableContainerClasses;