向材质ui SwipeableDrawer添加可点击的手柄

Question

是否知道是否可以向材质ui SwipeableDrawer添加可点击的手柄？类似于此处的Google地图：

Google Maps

button.css

position: absolute;
top: 100px;
left: -50px;
width: 50px;
height: 100px;
z-index: 10000; // This was intended to get above both of the other elements

SlideableDrawer

top: 0;
flex: 1 0 auto;
height: 100%;
display: flex;
z-index: 1200;
outline: none;
position: fixed;
overflow-y: auto;
flex-direction: column;

backdrop.css

top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
position: fixed;
touch-action: none;
background-color: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;

理想地，当抽屉处于非活动状态时，此手柄将位于页面的侧面。

沙箱： https://codesandbox.io/s/tender-einstein-jzluw

抽屉由于某种原因无法正常工作，但我的问题（我认为）还是与css有关。

Answer 1

要使此按钮完全可见，您需要覆盖MuiDrawer-paper的溢出Y。 您可以使用MuiTheme来做到这一点：

import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';

const theme = createMuiTheme({
  overrides: {
    MuiDrawer: {
      paper: {
        overflowY: 'visible',
      }
    }
  }
});

并使用ThemeProvider包装您的组件：

  <ThemeProvider theme={theme}>
     {your component...}
  </ThemeProvider>

您可以在CodeSandbox上参考我的实现（我没有尝试使抽屉功能正常，只是设计了按钮）：CodeSandbox