[MUI] MUI 예제: 3. `sx` Prop을 이용한 커스터마이징

MUI 예제: 3. sx Prop을 이용한 커스터마이징

MUI v5부터 도입된 sx prop은 컴포넌트에 직접 CSS를 적용하는 매우 강력한 방법입니다. 테마의 값에 접근할 수 있어 일관성을 유지하기 좋습니다.

기본 사용법

CSS 속성을 객체 형태로 전달합니다.

import * as React from 'react';
import Box from '@mui/material/Box';

export default function SxProp() {
  return (
    <Box
      sx={{
        width: 300,
        height: 300,
        backgroundColor: 'primary.dark', // 테마의 primary 색상 사용
        '&:hover': {
          backgroundColor: 'primary.main',
          opacity: [0.9, 0.8, 0.7],
        },
      }}
    />
  );
}

반응형 스타일링

sx prop 내에서 배열을 사용하여 breakpoint별로 다른 스타일을 적용할 수 있습니다.
배열의 값은 xs, sm, md, lg, xl 순서에 해당합니다.

import Button from '@mui/material/Button';

<Button
  sx={{
    // 화면이 작을 때는 100px, 중간일 때는 200px, 클 때는 300px
    width: [100, 200, 300],
    // 테마의 spacing 함수를 사용. 2는 theme.spacing(2)와 같음 (보통 16px)
    p: [2, 3, 4], // padding
    fontSize: '1rem'
  }}
>
  Responsive Button
</Button>