diff --git a/docs/pages/api/swipeable-drawer.md b/docs/pages/api/swipeable-drawer.md
index 881038ed5cfe79..6e02412d824ab1 100644
--- a/docs/pages/api/swipeable-drawer.md
+++ b/docs/pages/api/swipeable-drawer.md
@@ -33,7 +33,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| onClose * | func | | Callback fired when the component requests to be closed.
**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. |
| onOpen * | func | | Callback fired when the component requests to be opened.
**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. |
| open * | bool | | If `true`, the drawer is open. |
-| SwipeAreaProps | object | | Props applied to the swipe area element. |
+| SwipeAreaProps | object | | The element is used to intercept the touch events on the edge. |
| swipeAreaWidth | number | 20 | The width of the left most (or right most) area in pixels where the drawer can be swiped open from. |
| transitionDuration | number
| { enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
index 0d59b867193cc9..4dad5c18eb9bac 100644
--- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { elementTypeAcceptingRef } from '@material-ui/utils';
+import { getThemeProps } from '@material-ui/styles';
import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';
import ownerDocument from '../utils/ownerDocument';
import useEventCallback from '../utils/useEventCallback';
@@ -121,7 +122,9 @@ const transitionDurationDefault = { enter: duration.enteringScreen, exit: durati
const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
+const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) {
+ const theme = useTheme();
+ const props = getThemeProps({ name: 'MuiSwipeableDrawer', props: { ...inProps }, theme });
const {
anchor = 'left',
disableBackdropTransition = false,
@@ -142,7 +145,6 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
...other
} = props;
- const theme = useTheme();
const [maybeSwiping, setMaybeSwiping] = React.useState(false);
const swipeInstance = React.useRef({
isSwiping: null,
@@ -615,7 +617,7 @@ SwipeableDrawer.propTypes = {
style: PropTypes.object,
}),
/**
- * Props applied to the swipe area element.
+ * The element is used to intercept the touch events on the edge.
*/
SwipeAreaProps: PropTypes.object,
/**
diff --git a/packages/material-ui/src/styles/props.d.ts b/packages/material-ui/src/styles/props.d.ts
index 1ea5598e0222af..b6a9b0fd96efe7 100644
--- a/packages/material-ui/src/styles/props.d.ts
+++ b/packages/material-ui/src/styles/props.d.ts
@@ -81,6 +81,7 @@ import { StepLabelProps } from '../StepLabel';
import { StepperProps } from '../Stepper';
import { StepProps } from '../Step';
import { SvgIconProps } from '../SvgIcon';
+import { SwipeableDrawerProps } from '../SwipeableDrawer';
import { SwitchProps } from '../Switch';
import { TableBodyProps } from '../TableBody';
import { TableCellProps } from '../TableCell';
@@ -186,6 +187,7 @@ export interface ComponentsPropsList {
MuiStepLabel: StepLabelProps;
MuiStepper: StepperProps;
MuiSvgIcon: SvgIconProps;
+ MuiSwipeableDrawer: SwipeableDrawerProps;
MuiSwitch: SwitchProps;
MuiTab: TabProps;
MuiTable: TableProps;