[React] Mui Custom theme

프로젝트에 일관되게 적용시켜줄 색상, 투명도, 그림자 상태 등을 theme로 정의

Mui는 light theme type이 기본 값.

theme 생성

• createTheme() - >theme 객체 반환
• theme 속성
  • palette: 색상 정보
    • Primary
    • Secondary
    • Error
    • Warning
    • info
    • Success
  • typography: 텍스트 스타일 (폰트 크기, 굵기 등)
  • spacing: element 간의 간격
  • breakpoints: UI가 변경되는 기준
    • xs, extra-small: 0px
    • sm, small: 600px
    • md, medium: 900px
    • lg, large: 1200px
    • xl, extra-large: 1536px
  • zIndex
    • app bar: 1100
    • drawer: 1200
    • modal: 1300
    • snackbar: 1400
    • tooltip: 1500
  • transitions
  • compositions

import { createTheme } from "@mui/material";

export const theme = createTheme({
    palette: {
        primary: {
            main: "#1750a5",
            light: "skyblue"
        },
        secondary: {
            main: "#15c630",
        },
        otherColor: {
            main: "#999"
        }
    },
		...
})

themeProvider

• ThemeProvider에 theme 객체를 theme 속성으로 전달하면 추가 작업 없이 이 theme 객체를 모든 자식 컴포넌트에서 사용할 수 있음
• 주로 root가 되는 컴포넌트를 ThemeProvider로 래핑

import { ThemeProvider } from '@mui/material';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { theme } from './theme';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

theme 활용하기

useTheme()

import { useTheme } from '@mui/material/styles';

function DeepChild() {
  const theme = useTheme();
  return <span>{`spacing ${theme.spacing}`}</span>;
}

useStyles()

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme =>
    ({
      root: {
        height: '100%',
        background: theme.palette.primary.main
      },
      menuIconButton: {
        marginRight: theme.spacing(2),
      },
      menuTitle: {
        flexGrow: 5,
      },
      menuButton: {
        marginRight: theme.spacing(2),
        flexGrow: 1,
        display: 'flex'
      },
});