diff --git a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
index 5d13dd37a19a84..831d506e6c2bf8 100644
--- a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
+++ b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 
-export const styles = {
+export const styles = (theme) => ({
   /* Styles applied to the root element. */
   root: {
     display: 'flex',
-    padding: '8px 24px 24px',
+    padding: theme.spacing(1, 2, 2),
   },
-};
+});
 
 const ExpansionPanelDetails = React.forwardRef(function ExpansionPanelDetails(props, ref) {
   const { classes, className, ...other } = props;
diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
index 7ed48db1ad40bf..b612814034e2ff 100644
--- a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
+++ b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
@@ -17,7 +17,7 @@ export const styles = (theme) => {
       display: 'flex',
       minHeight: 8 * 6,
       transition: theme.transitions.create(['min-height', 'background-color'], transition),
-      padding: theme.spacing(0, 3),
+      padding: theme.spacing(0, 2),
       '&:hover:not($disabled)': {
         cursor: 'pointer',
       },