set popper click outside
//dependencies const { render } = ReactDOM, { useState } = React, { Popper, Button, Paper, ClickAwayListener } = MaterialUI //custom popper const MyPopper = ({isOpen,clickAwayHandler}) => ( <ClickAwayListener onClickAway={clickAwayHandler}> <Popper open={isOpen}> <Paper className="popper">There goes my custom popper</Paper> </Popper> </ClickAwayListener> ) //main page const MainPage = () => { const [isOpen, setIsOpen] = useState(true), clickAwayHandler = () => setIsOpen(false), clickHandler = () => setIsOpen(true) return ( <div> <Button onClick={clickHandler}>Toggle pop-up</Button> { isOpen && <MyPopper {...{clickAwayHandler,isOpen}} /> } </div> ) } //render render ( <MainPage />, document.getElementById('root') )
Source: stackoverflow.com