diff --git a/docs/pages/api-docs/collapse.md b/docs/pages/api-docs/collapse.md
index 1a98c40cff3d69..b9ef19b464f9b0 100644
--- a/docs/pages/api-docs/collapse.md
+++ b/docs/pages/api-docs/collapse.md
@@ -46,9 +46,9 @@ Any other props supplied will be provided to the root element ([Transition](http
| Rule name | Global class | Description |
|:-----|:-------------|:------------|
-| container | .MuiCollapse-container | Styles applied to the container element.
-| entered | .MuiCollapse-entered | Styles applied to the container element when the transition has entered.
-| hidden | .MuiCollapse-hidden | Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px.
+| root | .MuiCollapse-root | Styles applied to the root element.
+| entered | .MuiCollapse-entered | Styles applied to the root element when the transition has entered.
+| hidden | .MuiCollapse-hidden | Styles applied to the root element when the transition has exited and `collapsedHeight` != 0px.
| wrapper | .MuiCollapse-wrapper | Styles applied to the outer wrapper element.
| wrapperInner | .MuiCollapse-wrapperInner | Styles applied to the inner wrapper element.
diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts
index 42ffc952e5f946..57b6a89e39b843 100644
--- a/packages/material-ui/src/Collapse/Collapse.d.ts
+++ b/packages/material-ui/src/Collapse/Collapse.d.ts
@@ -36,7 +36,7 @@ export interface CollapseProps extends StandardProps ({
- /* Styles applied to the container element. */
- container: {
+ /* Styles applied to the root element. */
+ root: {
height: 0,
overflow: 'hidden',
transition: theme.transitions.create('height'),
},
- /* Styles applied to the container element when the transition has entered. */
+ /* Styles applied to the root element when the transition has entered. */
entered: {
height: 'auto',
overflow: 'visible',
},
- /* Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px. */
+ /* Styles applied to the root element when the transition has exited and `collapsedHeight` != 0px. */
hidden: {
visibility: 'hidden',
},
@@ -196,6 +197,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
{(state, childProps) => (
{
+ if (props.classes && props.classes.container) {
+ throw new Error([
+ 'Material-UI: the classes.container key is deprecated.',
+ 'Use `classes.root` instead',
+ 'The name of the pseudo-class was changed for consistency.',
+ ]).join('\n');
+ }
+
+ return null;
+ }),
/**
* @ignore
*/
diff --git a/packages/material-ui/src/Collapse/Collapse.test.js b/packages/material-ui/src/Collapse/Collapse.test.js
index c4530917536f02..65f7a38b3b3e95 100644
--- a/packages/material-ui/src/Collapse/Collapse.test.js
+++ b/packages/material-ui/src/Collapse/Collapse.test.js
@@ -37,11 +37,11 @@ describe('', () => {
it('should render a container around the wrapper', () => {
const { container } = render(
- ,
+ ,
);
const collapse = container.firstChild;
expect(collapse.tagName).to.equal('DIV');
- expect(collapse).to.have.class(classes.container);
+ expect(collapse).to.have.class(classes.root);
expect(collapse).to.have.class('woofCollapse1');
});