[MUI] MUI 예제: 4. Theming

MUI 예제: 4. Theming

createTheme과 ThemeProvider를 사용하면 애플리케이션 전체의 디자인을 일관되게 관리하고 변경할 수 있습니다.

커스텀 테마 생성 및 적용

createTheme으로 테마 객체를 만들고, ThemeProvider로 앱의 최상단을 감싸서 테마를 적용합니다.

import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';

// 새로운 테마 정의
const theme = createTheme({
  palette: {
    primary: {
      // 연한 보라색 계열로 기본 색상 변경
      main: '#7e57c2',
      light: '#b085f5',
      dark: '#4d2c91',
      contrastText: '#ffffff',
    },
    secondary: {
      main: '#f44336',
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    button: {
      textTransform: 'none', // 버튼 텍스트를 대문자로 변경하지 않음
    },
  },
});

function App() {
  return (
    // ThemeProvider로 하위 컴포넌트들을 감싸줍니다.
    <ThemeProvider theme={theme}>
      <Stack spacing={2} direction="row" sx={{ p: 2 }}>
        {/* 이제 Button은 위에서 정의한 primary 색상을 사용합니다 */}
        <Button variant="contained">Primary Color</Button>
        <Button variant="contained" color="secondary">Secondary Color</Button>
      </Stack>
    </ThemeProvider>
  );
}

export default App;