[SwipeableDrawer] Support global theme changes (#19771)

docs/pages/api/swipeable-drawer.md

@@ -33,7 +33,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name required">onClose&nbsp;*</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name required">onOpen&nbsp;*</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be opened.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name required">open&nbsp;*</span> | <span class="prop-type">bool</span> |  | If `true`, the drawer is open. |
-| <span class="prop-name">SwipeAreaProps</span> | <span class="prop-type">object</span> |  | Props applied to the swipe area element. |
+| <span class="prop-name">SwipeAreaProps</span> | <span class="prop-type">object</span> |  | The element is used to intercept the touch events on the edge. |
 | <span class="prop-name">swipeAreaWidth</span> | <span class="prop-type">number</span> | <span class="prop-default">20</span> | The width of the left most (or right most) area in pixels where the drawer can be swiped open from. |
 | <span class="prop-name">transitionDuration</span> | <span class="prop-type">number<br>&#124;&nbsp;{ enter?: number, exit?: number }</span> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen }</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 

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,
   /**

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;