diff --git a/docs/src/pages/demos/cards/RecipeReviewCard.js b/docs/src/pages/demos/cards/RecipeReviewCard.js
index 5c2ad9bf67a469..2d4a7871da3a1c 100644
--- a/docs/src/pages/demos/cards/RecipeReviewCard.js
+++ b/docs/src/pages/demos/cards/RecipeReviewCard.js
@@ -24,9 +24,6 @@ const useStyles = makeStyles(theme => ({
     height: 0,
     paddingTop: '56.25%', // 16:9
   },
-  actions: {
-    display: 'flex',
-  },
   expand: {
     transform: 'rotate(0deg)',
     marginLeft: 'auto',
@@ -77,7 +74,7 @@ function RecipeReviewCard() {
           guests. Add 1 cup of frozen peas along with the mussels, if you like.
         </Typography>
       </CardContent>
-      <CardActions className={classes.actions} disableActionSpacing>
+      <CardActions disableSpacing>
         <IconButton aria-label="Add to favorites">
           <FavoriteIcon />
         </IconButton>
diff --git a/docs/src/pages/demos/cards/RecipeReviewCard.tsx b/docs/src/pages/demos/cards/RecipeReviewCard.tsx
index a7b138110bceec..a759bc809fac17 100644
--- a/docs/src/pages/demos/cards/RecipeReviewCard.tsx
+++ b/docs/src/pages/demos/cards/RecipeReviewCard.tsx
@@ -25,9 +25,6 @@ const useStyles = makeStyles((theme: Theme) =>
       height: 0,
       paddingTop: '56.25%', // 16:9
     },
-    actions: {
-      display: 'flex',
-    },
     expand: {
       transform: 'rotate(0deg)',
       marginLeft: 'auto',
@@ -79,7 +76,7 @@ function RecipeReviewCard() {
           guests. Add 1 cup of frozen peas along with the mussels, if you like.
         </Typography>
       </CardContent>
-      <CardActions className={classes.actions} disableActionSpacing>
+      <CardActions disableSpacing>
         <IconButton aria-label="Add to favorites">
           <FavoriteIcon />
         </IconButton>
diff --git a/docs/src/pages/guides/migration-v3/migration-v3.md b/docs/src/pages/guides/migration-v3/migration-v3.md
index 55abfe314007f6..ffc4c6a2188987 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3.md
@@ -237,9 +237,20 @@ You should be able to move the custom styles to the root class key.
 
 ### Dialog
 
-- [DialogActions] `action` CSS class is applied to root element instead of children if `disableActionSpacing={false}`.
+- [DialogActions] Rename the `disableActionSpacing` prop `disableSpacing`.
+- [DialogActions] Rename the `action` CSS class `spacing`.
 - [DialogContentText] Use typography variant `body1` instead of `subtitle1`.
 
+### Card
+
+- [CardActions] Rename the `disableActionSpacing` prop `disableSpacing`.
+- [CardActions] Remove the `disableActionSpacing` CSS class.
+- [CardActions] Rename the `action` CSS class `spacing`.
+
+### ExpansionPanel
+
+- [ExpansionPanelActions] Rename the `action` CSS class `spacing`.
+
 ### Selection controls
 
 - [Switch][Radio][Checkbox] Improve specification compliance.
diff --git a/packages/material-ui/src/CardActions/CardActions.d.ts b/packages/material-ui/src/CardActions/CardActions.d.ts
index 99a7876c46ec6a..e6e9421ec9c154 100644
--- a/packages/material-ui/src/CardActions/CardActions.d.ts
+++ b/packages/material-ui/src/CardActions/CardActions.d.ts
@@ -3,10 +3,10 @@ import { StandardProps } from '..';
 
 export interface CardActionsProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardActionsClassKey> {
-  disableActionSpacing?: boolean;
+  disableSpacing?: boolean;
 }
 
-export type CardActionsClassKey = 'root' | 'disableActionSpacing' | 'action';
+export type CardActionsClassKey = 'root' | 'spacing';
 
 declare const CardActions: React.ComponentType<CardActionsProps>;
 
diff --git a/packages/material-ui/src/CardActions/CardActions.js b/packages/material-ui/src/CardActions/CardActions.js
index 60d4112d1aa8fd..22387f70cd4040 100644
--- a/packages/material-ui/src/CardActions/CardActions.js
+++ b/packages/material-ui/src/CardActions/CardActions.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
-import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
 
 export const styles = {
@@ -10,34 +9,25 @@ export const styles = {
   root: {
     display: 'flex',
     alignItems: 'center',
-    boxSizing: 'border-box',
-    padding: '8px 4px',
-  },
-  /* Styles applied to the root element if `disableActionSpacing={true}`. */
-  disableActionSpacing: {
     padding: 8,
   },
-  /* Styles applied to the children. */
-  action: {
-    margin: '0 4px',
+  /* Styles applied to the root element if `disableSpacing={false}`. */
+  spacing: {
+    '& > * + *': {
+      marginLeft: 8,
+    },
   },
 };
 
 const CardActions = React.forwardRef(function CardActions(props, ref) {
-  const { disableActionSpacing, children, classes, className, ...other } = props;
+  const { disableSpacing, classes, className, ...other } = props;
 
   return (
     <div
-      className={clsx(
-        classes.root,
-        { [classes.disableActionSpacing]: disableActionSpacing },
-        className,
-      )}
+      className={clsx(classes.root, { [classes.spacing]: !disableSpacing }, className)}
       ref={ref}
       {...other}
-    >
-      {disableActionSpacing ? children : cloneChildrenWithClassName(children, classes.action)}
-    </div>
+    />
   );
 });
 
@@ -56,13 +46,13 @@ CardActions.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * If `true`, the card actions do not have additional margin.
+   * If `true`, the actions do not have additional margin.
    */
-  disableActionSpacing: PropTypes.bool,
+  disableSpacing: PropTypes.bool,
 };
 
 CardActions.defaultProps = {
-  disableActionSpacing: false,
+  disableSpacing: false,
 };
 
 export default withStyles(styles, { name: 'MuiCardActions' })(CardActions);
diff --git a/packages/material-ui/src/CardActions/CardActions.test.js b/packages/material-ui/src/CardActions/CardActions.test.js
index fd11c0a89a5641..b27c84016eaffa 100644
--- a/packages/material-ui/src/CardActions/CardActions.test.js
+++ b/packages/material-ui/src/CardActions/CardActions.test.js
@@ -1,8 +1,6 @@
 import React from 'react';
-import { assert } from 'chai';
 import {
   createMount,
-  createShallow,
   describeConformance,
   getClasses,
 } from '@material-ui/core/test-utils';
@@ -10,12 +8,10 @@ import CardActions from './CardActions';
 
 describe('<CardActions />', () => {
   let mount;
-  let shallow;
   let classes;
 
   before(() => {
     mount = createMount();
-    shallow = createShallow({ dive: true });
     classes = getClasses(<CardActions />);
   });
 
@@ -30,32 +26,4 @@ describe('<CardActions />', () => {
     refInstanceof: window.HTMLDivElement,
     skip: ['componentProp'],
   }));
-
-  it('should pass the action class to children', () => {
-    const child3 = false;
-    const wrapper = shallow(
-      <CardActions>
-        <div id="child1" />
-        <div id="child2" />
-        {child3 && <div id="child3" />}
-      </CardActions>,
-    );
-
-    assert.strictEqual(wrapper.find('#child1').hasClass(classes.action), true);
-    assert.strictEqual(wrapper.find('#child2').hasClass(classes.action), true);
-  });
-
-  describe('prop: disableActionSpacing', () => {
-    it('does not pass the action class to the children', () => {
-      const wrapper = shallow(
-        <CardActions disableActionSpacing>
-          <div id="child1" />
-          <div id="child2" />
-        </CardActions>,
-      );
-
-      assert.strictEqual(wrapper.find('#child1').hasClass(classes.action), false);
-      assert.strictEqual(wrapper.find('#child2').hasClass(classes.action), false);
-    });
-  });
 });
diff --git a/packages/material-ui/src/DialogActions/DialogActions.d.ts b/packages/material-ui/src/DialogActions/DialogActions.d.ts
index ebcf9d860462ea..3c9ca64f073567 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.d.ts
+++ b/packages/material-ui/src/DialogActions/DialogActions.d.ts
@@ -3,10 +3,10 @@ import { StandardProps } from '..';
 
 export interface DialogActionsProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogActionsClassKey> {
-  disableActionSpacing?: boolean;
+  disableSpacing?: boolean;
 }
 
-export type DialogActionsClassKey = 'root' | 'action';
+export type DialogActionsClassKey = 'root' | 'spacing';
 
 declare const DialogActions: React.ComponentType<DialogActionsProps>;
 
diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js
index 42f0f09a55f3b8..5621f4c13ff13b 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.js
+++ b/packages/material-ui/src/DialogActions/DialogActions.js
@@ -9,12 +9,11 @@ export const styles = {
   root: {
     display: 'flex',
     alignItems: 'center',
+    padding: 8,
     justifyContent: 'flex-end',
-    flex: '0 0 auto',
-    margin: 8,
   },
-  /* Styles applied to the root element if `disableActionSpacing={false}`. */
-  action: {
+  /* Styles applied to the root element if `disableSpacing={false}`. */
+  spacing: {
     '& > * + *': {
       marginLeft: 8,
     },
@@ -22,22 +21,14 @@ export const styles = {
 };
 
 const DialogActions = React.forwardRef(function DialogActions(props, ref) {
-  const { disableActionSpacing, children, classes, className, ...other } = props;
+  const { disableSpacing, classes, className, ...other } = props;
 
   return (
     <div
-      className={clsx(
-        classes.root,
-        {
-          [classes.action]: !disableActionSpacing,
-        },
-        className,
-      )}
+      className={clsx(classes.root, { [classes.spacing]: !disableSpacing }, className)}
       ref={ref}
       {...other}
-    >
-      {children}
-    </div>
+    />
   );
 });
 
@@ -56,13 +47,13 @@ DialogActions.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * If `true`, the dialog actions do not have additional margin.
+   * If `true`, the actions do not have additional margin.
    */
-  disableActionSpacing: PropTypes.bool,
+  disableSpacing: PropTypes.bool,
 };
 
 DialogActions.defaultProps = {
-  disableActionSpacing: false,
+  disableSpacing: false,
 };
 
 export default withStyles(styles, { name: 'MuiDialogActions' })(DialogActions);
diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts
index ba218558f5d77b..b4fb6a6c9444f6 100644
--- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts
+++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts
@@ -4,7 +4,7 @@ import { StandardProps } from '..';
 export interface ExpansionPanelActionsProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ExpansionPanelActionsClassKey> {}
 
-export type ExpansionPanelActionsClassKey = 'root' | 'action';
+export type ExpansionPanelActionsClassKey = 'root' | 'spacing';
 
 declare const ExpansionPanelActions: React.ComponentType<ExpansionPanelActionsProps>;
 
diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
index 4b82557d898d4b..d2875b467f7f81 100644
--- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
+++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
-import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
 
 export const styles = {
@@ -10,22 +9,26 @@ export const styles = {
   root: {
     display: 'flex',
     alignItems: 'center',
+    padding: 8,
     justifyContent: 'flex-end',
-    padding: '16px 8px',
   },
-  /* Styles applied to the children. */
-  action: {
-    marginLeft: 8,
+  /* Styles applied to the root element if `disableSpacing={false}`. */
+  spacing: {
+    '& > * + *': {
+      marginLeft: 8,
+    },
   },
 };
 
 const ExpansionPanelActions = React.forwardRef(function ExpansionPanelActions(props, ref) {
-  const { children, classes, className, ...other } = props;
+  const { classes, className, disableSpacing, ...other } = props;
 
   return (
-    <div className={clsx(classes.root, className)} ref={ref} {...other}>
-      {cloneChildrenWithClassName(children, classes.action)}
-    </div>
+    <div
+      className={clsx(classes.root, { [classes.spacing]: !disableSpacing }, className)}
+      ref={ref}
+      {...other}
+    />
   );
 });
 
@@ -43,6 +46,14 @@ ExpansionPanelActions.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * If `true`, the actions do not have additional margin.
+   */
+  disableSpacing: PropTypes.bool,
+};
+
+ExpansionPanelActions.defaultProps = {
+  disableSpacing: false,
 };
 
 export default withStyles(styles, { name: 'MuiExpansionPanelActions' })(ExpansionPanelActions);
diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js
index 795ada488f5d31..fde0617fbcebde 100644
--- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js
+++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js
@@ -1,8 +1,6 @@
 import React from 'react';
-import { assert } from 'chai';
 import {
   createMount,
-  createShallow,
   describeConformance,
   getClasses,
 } from '@material-ui/core/test-utils';
@@ -10,12 +8,10 @@ import ExpansionPanelActions from './ExpansionPanelActions';
 
 describe('<ExpansionPanelActions />', () => {
   let mount;
-  let shallow;
   let classes;
 
   before(() => {
     mount = createMount();
-    shallow = createShallow({ dive: true });
     classes = getClasses(<ExpansionPanelActions>foo</ExpansionPanelActions>);
   });
 
@@ -30,31 +26,4 @@ describe('<ExpansionPanelActions />', () => {
     refInstanceof: window.HTMLDivElement,
     skip: ['componentProp'],
   }));
-
-  it('should render children with the button class wrapped in a div with the action class', () => {
-    const wrapper = shallow(
-      <ExpansionPanelActions>
-        <button type="submit" className="woofExpansionPanelActions">
-          Hello
-        </button>
-      </ExpansionPanelActions>,
-    );
-    const button = wrapper.childAt(0);
-    assert.strictEqual(button.hasClass(classes.action), true);
-    assert.strictEqual(button.type(), 'button');
-    assert.strictEqual(button.hasClass('woofExpansionPanelActions'), true);
-  });
-
-  it('should render a valid children', () => {
-    const wrapper = shallow(
-      <ExpansionPanelActions>
-        <button type="submit">Hello</button>
-        {null}
-      </ExpansionPanelActions>,
-    );
-
-    const button = wrapper.childAt(0);
-    assert.strictEqual(button.hasClass(classes.action), true);
-    assert.strictEqual(button.type(), 'button');
-  });
 });
diff --git a/packages/material-ui/src/utils/reactHelpers.d.ts b/packages/material-ui/src/utils/reactHelpers.d.ts
index 10047cc1010947..6e84ea4eef78a9 100644
--- a/packages/material-ui/src/utils/reactHelpers.d.ts
+++ b/packages/material-ui/src/utils/reactHelpers.d.ts
@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { StandardProps } from '../';
 
-export function cloneChildrenWithClassName<T>(children: React.ReactNode, className: string): T[];
-
 export type NamedMuiComponent = React.ComponentType & { muiName: string };
 
 export interface NamedMuiElement {
diff --git a/packages/material-ui/src/utils/reactHelpers.js b/packages/material-ui/src/utils/reactHelpers.js
index bfa03434ff1cb1..4a7e2c6f81b804 100644
--- a/packages/material-ui/src/utils/reactHelpers.js
+++ b/packages/material-ui/src/utils/reactHelpers.js
@@ -1,18 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
-
-export function cloneElementWithClassName(child, className) {
-  return React.cloneElement(child, {
-    className: clsx(child.props.className, className),
-  });
-}
-
-export function cloneChildrenWithClassName(children, className) {
-  return React.Children.map(
-    children,
-    child => React.isValidElement(child) && cloneElementWithClassName(child, className),
-  );
-}
 
 export function isMuiElement(element, muiNames) {
   return React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx
index e5ba13ea0296eb..1d0028cc936b95 100644
--- a/packages/material-ui/test/typescript/components.spec.tsx
+++ b/packages/material-ui/test/typescript/components.spec.tsx
@@ -226,7 +226,7 @@ const CardMediaTest = () => (
         guests. Add 1 cup of frozen peas along with the mussels, if you like.
       </Typography>
     </CardContent>
-    <CardActions disableActionSpacing>
+    <CardActions disableSpacing>
       <IconButton aria-label="Add to favorites">
         <FakeIcon />
       </IconButton>
diff --git a/pages/api/card-actions.md b/pages/api/card-actions.md
index 08123b3a176469..b2b4e6044858c9 100644
--- a/pages/api/card-actions.md
+++ b/pages/api/card-actions.md
@@ -20,7 +20,7 @@ import CardActions from '@material-ui/core/CardActions';
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">disableActionSpacing</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the card actions do not have additional margin. |
+| <span class="prop-name">disableSpacing</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the actions do not have additional margin. |
 
 The `ref` is forwarded to the root element.
 
@@ -35,8 +35,7 @@ This property accepts the following keys:
 | Name | Description |
 |:-----|:------------|
 | <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">disableActionSpacing</span> | Styles applied to the root element if `disableActionSpacing={true}`.
-| <span class="prop-name">action</span> | Styles applied to the children.
+| <span class="prop-name">spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/CardActions/CardActions.js)
diff --git a/pages/api/dialog-actions.md b/pages/api/dialog-actions.md
index af8d3230502e4c..437c107cddb11b 100644
--- a/pages/api/dialog-actions.md
+++ b/pages/api/dialog-actions.md
@@ -20,7 +20,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">disableActionSpacing</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the dialog actions do not have additional margin. |
+| <span class="prop-name">disableSpacing</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the actions do not have additional margin. |
 
 The `ref` is forwarded to the root element.
 
@@ -35,7 +35,7 @@ This property accepts the following keys:
 | Name | Description |
 |:-----|:------------|
 | <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">action</span> | Styles applied to the root element if `disableActionSpacing={false}`.
+| <span class="prop-name">spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/DialogActions/DialogActions.js)
diff --git a/pages/api/expansion-panel-actions.md b/pages/api/expansion-panel-actions.md
index 5512613c204ff8..a43fd6647fd9d2 100644
--- a/pages/api/expansion-panel-actions.md
+++ b/pages/api/expansion-panel-actions.md
@@ -20,6 +20,7 @@ import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name required">children&nbsp;*</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">disableSpacing</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the actions do not have additional margin. |
 
 The `ref` is forwarded to the root element.
 
@@ -34,7 +35,7 @@ This property accepts the following keys:
 | Name | Description |
 |:-----|:------------|
 | <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">action</span> | Styles applied to the children.
+| <span class="prop-name">spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js)