reactjs - SwipeableDrawer 与 swipeableArea MaterialUi 上的按钮

Question

我正在尝试创建一个这样的 swipeableDrawer。我想要我的 swipeableDrawer 上的一个按钮，我可以点击它来调度一个动作。

但我无法同时点击按钮并滑动可滑动抽屉。我要它。

<Global styles={{
           '#swipeable .MuiPaper-root': {
                     height: `calc(78% - ${drawerBleeding}px)`,
                     overflow: 'visible',
            },
           }}/>
     <SwipeableDrawer
            id={'swipeable'}
            anchor="bottom"
            open={open}
            onClose={toggleDrawer(false)}
            onOpen={toggleDrawer(true)}
            swipeAreaWidth={100}
            disableSwipeToOpen={false}
            ModalProps={{
                keepMounted: true,
            }}>
            <>
                <Card>
                    <CardContent>  
                                <div className="row">
                                    <div className="col-12">
                                        {!ricalcolaPremioBTNEnabled ?
                                            <Button className={buttonClasses.root}
                                                    onClick={() => history.push(INFO_PERSONALI_PATH)}>CONTINUA</Button> :
                                            <Button className={buttonClasses.root}
                                                    disabled={!ricalcolaPremioBTNEnabled}
                                                    onClick={handleRicalcolaPremio}>RICALCOLA</Button>}
                                    </div>
                                </div>
                    </CardContent>
                </Card>
            </>


            <div style={{height: '100%', marginTop: '3vw', overflowY: 'auto', overflowX: 'hidden'}}>
                <div className="row p-3">
                    Content of swipeable drawer
                </div>
             </div>
     </SwipeableDrawer>
</Global>

我该如何解决？

标签： reactjsmaterial-ui