Bom dia pessoal! Estou com dificuldades em entender a lógica e dinâmica para fazer o modal do material-ui aparecer assim que a página é carregada, no momento eu não mexi no código pois estou tentando entender toda a estrutura dele, mas se alguém conseguir me der uma luz, eu agradeceria import { makeStyles } from '@material-ui/core/styles'; import Modal from '@material-ui/core/Modal'; function rand() { return Math.round(Math.random() * 20) - 10; } function getModalStyle() { const top = 50 + rand(); const left = 50 + rand(); return { top: `${top}%`, left: `${left}%`, transform: `translate(-${top}%, -${left}%)`, }; } const useStyles = makeStyles((theme) => ({ paper: { position: 'absolute', width: 400, backgroundColor: theme.palette.background.paper, border: '2px solid #000', boxShadow: theme.shadows[5], padding: theme.spacing(2, 4, 3), }, })); export default function Aviso() { const classes = useStyles(); // getModalStyle is not a pure function, we roll the style only on the first render const [modalStyle] = React.useState(getModalStyle); const [open, setOpen] = React.useState(false); const handleOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); }; const body = ( <div style={modalStyle} className={classes.paper}> <h2 id="simple-modal-title">Text in a modal</h2> <p id="simple-modal-description"> Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p> <Aviso /> </div> ); return ( <div> <button type="button" onClick={handleOpen}> Open Modal </button> <Modal open={open} onClose={handleClose} aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" > {body} </Modal> </div> ); } Continue reading...