sx prop으로 MUI 컴포넌트 수정하기

결론

특정 부분의 css를 변경하려면 'sx' prop을 사용하는 방법이 있다.
sx={{ "& .MuiDialog-paper": { backgroundColor: "black" } }}
이런 형식으로 sx 속성을 입력하면 된다.

문제

기본 제공되는 Full-screen dialogs 컴포넌트를 사용하던 중 일부분의 배경색을 바꾸고 싶었으나 sx를 변경해도 반영되지 않았다

• Full-screen dialogs는 여러 하위 컴포넌트로 구성된 컴포넌트임
• 현재 만지고 있는 부분은 복합된 컴포넌트의 제일 위의 레벨
• Full-screen dialogs 컴포넌트의 css 변경하는 여러 방법 중 sx prop를 사용

'sx' prop

• Material UI v5 이상에서 제공하는 기능으로, 컴포넌트에 직접 CSS 스타일을 적용할 수 있는 방법
• 클래스 이름을 정의하고 별도의 스타일 시트를 작성할 필요 없이 컴포넌트의 스타일을 쉽게 조정

1. 변경할 요소의 클래스명 찾기
   바꾸고 싶은 부분을 화면으로 클릭해서 클래스명을 찾는 방법이 직관적이라 편리하게 느껴진다.
   

   Dialog 컴포넌트의 MuiDialog-paper에 배경색이 설정되어있다.

   <Dialog
     fullScreen
     open={togglePopupState.state}
     TransitionComponent={Transition}
     sx={{ "& .MuiDialog-paper": { backgroundColor: "black" } }}
   >

   &는 CSS의 현재 선택자를 나타내며, 여기서는 Dialog 컴포넌트 자체를 가리킴
   따라서 & .MuiDialog-paper는 Dialog의 하위 요소 중 .MuiDialog-paper 클래스에 접근하여 스타일을 변경할 수 있음
   

이미지가 아닌 부분을 흰색에서 검정색으로 변경함