css - 向 Material ui SwipeableDrawer 添加可点击 handle

Question

是否可以将可点击 handle 添加到 Material ui SwipeableDrawer 中？类似于此处的谷歌地图:

Google Maps

按钮.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

滑动抽屉

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

背景.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 的 overflow-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