mui - sx props

sx

• MUI에서 제공하는 스타일 넣는 props임
• sx는 style={{ }}랑 같은 개념임
• 근데 MUI 전용인것 뿐

<Box sx={{ padding: "0 2rem" }}/>

style과 sx 차이

항목	style={{ ... }}	sx={{ ... }}
기본 스타일	가능	가능
MUI 테마 적용	안 됨	됨 (primary.main, theme.spacing())
반응형 지원	안 됨	됨 ({ xs: 1, md: 2 } 등)
hover 같은 중첩 스타일	안 됨	됨 (&:hover, & .child 등 가능)
MUI 최적화	일반 CSS	MUI 스타일 시스템 기반

중첩 스타일 예시

<Box sx={{ padding: 2, color: "red", "&:hover": { color: "blue" } }}>Hello</Box>