[MUI] Dialog

기본 심플예제

버튼 클릭시 아래와 같이 Dialog 생성

import './App.css';
import {Button, Dialog, DialogContent, Grid} from "@mui/material";
import {useState} from "react";

function ExampleDialog() {
    const [open, setOpen] = useState(false);
    return (
        <>
            <Dialog open={open}>
                <DialogContent>
                    다이얼로그!!!<br/>
                    <Button variant={"outlined"} onClick={() => {
                        setOpen(!open)
                    }}>닫기</Button>
                </DialogContent>

            </Dialog>

            <Grid container direction={"column"} sx={{ml: 10}}>

                <Grid item sx={{mt: 2}}>
                    <Button onClick={() => {
                        setOpen(!open)
                    }
                    }
                            color={"secondary"}
                            variant={"outlined"}
                    >
                        Dialog
                    </Button>
                </Grid>

            </Grid>
        </>
    );
}

export default ExampleDialog;

<Dialog open={open}>
                <DialogTitle>제목제목</DialogTitle>
                <DialogContent>
                    <TextField fullWidth focused variant={"standard"}/><br/><br/><br/>
                    <Button variant={"outlined"} onClick={() => {
                        //실행시
                    }}>이벤트!</Button>
                    <Button variant={"outlined"} onClick={() => {
                        setOpen(!open)
                    }}>닫기</Button>
                </DialogContent>
            </Dialog>

fullScreen, maxWidth 메서드를 통해 Dialog를 전체화면으로 전환할지 또는 xs,md,lg등을 이용해 device 사이즈에 대응할지 정할 수 있다.