Material-ui: Questions on SwipeAreaProps (How to use them).

[TommyJackson85]

In the Swipable Drawer API documentation, more clarity could be added to how to utilise SwipeAreaProps on the Swipe Area. Maybe add a brief example. I couldn't find any sandbox examples of it being used.

In the mean time, does anybody have examples of where this feature is used? Or how I might use it? Can it be used for Styling it? Maybe not have it close fully to become like a mini variant drawer that can be swiped on the phone?
So far in the documentation it just highlights its an object and what its used for:
Props applied to the swipe area element.

Does it have the same rules as makeStyles ?

--
--------------^ Click "Preview" for a nicer view!

We use GitHub issues exclusively as a bugs and feature request tracker.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

[oliviertassinari]

@TommyJackson85 In this case, the best thing is to blame to find the origin of the prop: we can find #13592. So it was for styling. With hindsight, now, I would probably add a style rule swipeArea to better addressed the initial use case:

SwipeArea does not contain 'name' attribute to override styles

[oliviertassinari]

ith hindsight, now, I would probably add a style rule swipeArea to better addressed the initial use case:

@TommyJackson85 My bad, there is no style sheet for this component.

For the SwipeableDrawer, I think that it would be great to allow global theme changes. For instance, hysteresis, discovery, etc.

What about?

diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
index ddd7944600..a3e2aa54cf 100644
--- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { elementTypeAcceptingRef } from '@material-ui/utils';
+import { getThemeProps, useTheme } from '@material-ui/styles';
 import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';
 import ownerDocument from '../utils/ownerDocument';
 import useEventCallback from '../utils/useEventCallback';
@@ -121,7 +121,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,
@@ -621,6 +623,7 @@ SwipeableDrawer.propTypes = {
   }),
   /**
    * Props applied to the swipe area element.
+   * The element is used to intercept the touch events on the edge.
    */
   SwipeAreaProps: PropTypes.object,
   /**

[TommyJackson85]

I will work on this as it's related to another issue I am trying to fix.