Material UI Modal: BackdropProps

Material UI Modal을 사용해서 모달 팝업을 만들었는데 

저 모서리,, 회색;

Modal 팝업 안에 루틴 만드는 기능들을 div로 묶어둬서

div를 styled component로 배경색이랑 모서리 둥글게 바꿨는데

Modal 에는 이 설정이 안먹었다.

당연함 서로 태그 다름

 

그래서 오전 내내 찾아보다가 발견,,

Modal API 보니까 맨 아래에 있는 Props,, 

props 볼때마다 이해 잘 안돼서 안읽었는데 

앞으로 잘 봐야겠다.

 

 

 

 

저 props를 보면 BackdropComponent랑 BackdropProps가 있다. 

 

BackdropComponent

-> 배경 구성 요소로 사용자 정의 배경 렌더링을 활성화시켜준다.

 

BackdropProps

-> 위의 BackdropComponent의 요소에 적용된 props

 

 

 

스택 오버 플로우 보니까 BackdropProps에 background-color 스타일을 지정하는 방법이 있다.

나는 background에 none을 지정해줬다.

 

 

 

 

 

 

 

 

 

사라진 회색 모서리..!

 

 

 

 

 

 

 

 

 

개발자 도구 열어서 봤을때 Modal이랑 div 사이에 회색 박스가 있었는데 

이 회색 박스가 material ui에서 modal을 만들었을때 자동으로 지정되는 

BackdropComponent였다.

그래서 BackdropComponent의 props를 활용해서 해결..!

 

 

 

 

 

https://mui.com/material-ui/api/modal/

Modal API - Material UI

https://mui.com/material-ui/api/backdrop/

Backdrop API - Material UI