MUI 테마 커스터마이징 완전정복 – 나만의 디자인 시스템 만들기

 

 

MUI의 강력한 장점 중 하나는 바로
디자인 시스템을 손쉽게 커스터마이징할 수 있다는 점입니다.
이번 포스팅에서는 createTheme()과 ThemeProvider를 활용해서
전역 스타일, 색상, 폰트, 버튼 디자인 등을
한 번에 관리하는 방법을 정리해보겠습니다.

---

 

✅ 기본 구조: 테마 만들기 & 적용하기

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#FF6F61',
    },
    secondary: {
      main: '#4ECDC4',
    },
  },
  typography: {
    fontFamily: 'Pretendard, sans-serif',
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  );
}

 

---

 

🎯 주요 커스터마이징 항목들

1. 색상(Palette)

palette: {
  mode: 'light', // 또는 'dark'
  primary: {
    main: '#1976d2',
  },
  secondary: {
    main: '#f50057',
  },
},

2. 폰트(Typography)

typography: {
  fontFamily: '"Roboto", "Noto Sans KR", sans-serif',
  h1: { fontWeight: 700 },
  button: { textTransform: 'none' },
},

3. 버튼(Component level)

components: {
  MuiButton: {
    styleOverrides: {
      root: {
        borderRadius: '8px',
        padding: '10px 20px',
      },
    },
  },
},

 

---

 

🧠 실전 팁

• ThemeProvider는 최상단(App)에 한 번만 적용하면 하위 모든 컴포넌트에 자동 적용됨
• dark mode도 palette.mode: 'dark'로 손쉽게 전환 가능
• 개별 컴포넌트는 sx를 써서 예외 스타일 지정 가능

<Button sx={{ backgroundColor: 'primary.main', borderRadius: 4 }}>
  커스텀 버튼
</Button>