mui

MUI (Material UI) 컨벤션

---

Import 패턴

// ✅ 좋은 예: 트리 쉐이킹이 가능한 named import
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';

// ✅ 아이콘 import
import SearchIcon from '@mui/icons-material/Search';
import CloseIcon from '@mui/icons-material/Close';

// ❌ 나쁜 예: 배럴 import (번들 크기 증가 가능)
import { Button, TextField, Box } from '@mui/material';

---

sx prop 사용

sx prop은 MUI 컴포넌트에 인라인 스타일을 적용하는 방법이다.

import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

// ✅ 간단한 스타일: sx prop 사용
function OrderCard() {
  return (
    <Box
      sx={{
        padding: 2,           // theme.spacing(2) = 16px
        marginBottom: 1,
        backgroundColor: 'background.paper',
        borderRadius: 1,
        boxShadow: 1,
        '&:hover': {
          boxShadow: 3,
        },
      }}
    >
      <Typography
        variant="h6"
        sx={{
          color: 'text.primary',
          fontWeight: 'bold',
        }}
      >
        주문 제목
      </Typography>
    </Box>
  );
}

// 반응형 스타일 (breakpoints)
<Box
  sx={{
    width: {
      xs: '100%',   // mobile
      sm: '50%',    // tablet
      md: '33%',    // desktop
    },
    fontSize: { xs: 14, md: 16 },
  }}
/>

---

styled() API

복잡한 스타일이나 재사용 컴포넌트에는 styled()를 사용한다.

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';

// ✅ styled()로 커스텀 컴포넌트 생성
const StyledButton = styled(Button)(({ theme }) => ({
  borderRadius: theme.spacing(3),
  padding: theme.spacing(1, 3),
  textTransform: 'none',
  '&:hover': {
    backgroundColor: theme.palette.primary.dark,
  },
}));

const CardContainer = styled(Box)(({ theme }) => ({
  padding: theme.spacing(2),
  borderRadius: theme.shape.borderRadius,
  backgroundColor: theme.palette.background.paper,
  [theme.breakpoints.down('sm')]: {
    padding: theme.spacing(1),
  },
}));