Mui 3장 - Theme 설정

Mui

Mui Theming Mui Palette Mui DarkMode Mui Color

Theme 설정하기

• 공식 문서에 나와있는대로 테마를 생성한다.
• 테마 안에는 mode,palette 등의 여러 값들이 있다.
• 테마 설정은 최상단의 파일에 작성하고, 테마가 light || dark 인지를 전역으로 설정해주어 Mui의 ThemeProvider로 넘겨준다.

// App.tsx
import React, { useMemo } from "react";
import { PaletteMode, ThemeProvider, styled as MuiStyled } from "@mui/material";
import createCustomTheme from "./theme/palette";

const ColorModeContext = React.createContext({ toggleColorMode: () => {} });

function App() {
  const [mode, setMode] = React.useState < PaletteMode > "light";
  const colorMode = React.useMemo(
    () => ({
      // The dark mode switch would invoke this method
      toggleColorMode: () => {
        setMode((prevMode: PaletteMode) =>
          prevMode === "light" ? "dark" : "light"
        );
      },
    }),
    []
  );

  const theme = useMemo(() => createCustomTheme(mode), [mode]);

  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}></ThemeProvider>
    </ColorModeContext.Provider>
  );
}

// createTheme.d.ts
export default function createTheme(options?: ThemeOptions, ...args: object[]): Theme;

export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
  mixins?: MixinsOptions;
  components?: Components<Omit<Theme, 'components'>>;
  palette?: PaletteOptions;
  shadows?: Shadows;
  transitions?: TransitionsOptions;
  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
  zIndex?: ZIndexOptions;
  unstable_strictMode?: boolean;
  unstable_sxConfig?: SxConfig;
}

// palette.ts
const createCustomTheme = (mode: PaletteMode) =>
  createTheme({
    palette: {
      mode,
      ...
    },
  });

Palette 구성하기

• palette에는 물감을 짜놓고 사용하는 것과 같다.
• 기본 팔레트 옵션에는 main, primary, secondary 등과 같은 옵션들이 있지만 매우 제한적이기 때문에 declare를 사용하여 변수를 확장해준다.

const theme = createTheme({
  status: {
    danger: orange[500],
  },
  primary: {
    ...
  },
  secondary: {
    ...
  }
});

declare module '@mui/material/styles' {
  interface Theme {
    status: {
      danger: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    status?: {
      danger?: string;
    };
  }
}

Components 커스텀

• 사용하다보면 Mui 스타일의 우선 적용으로 인해 원하는 스타일이 적용되지 않을 때가 생긴다.
• 매 스타일에 important를 사용할 수 없기 때문에 style override를 통해 기존에 가진 컴포넌트 스타일을 덮어씌우는데, 이를 생성하는 theme에서 적용할 수 있다.

const theme = createCustomTheme = () => createTheme({
  components: {
    MuiGrid: {
      styleOverrides:{
        root: {
          ...스타일 작성
        }
      }
    }
  }
})

• 위와 같이 생성하는 테마 안에 스타일을 덮어씌우는 방식이다.
• 또는 컴포넌트 자체에 인라인 스타일을 적용하는 방식이 있는데 sx=& .MuiGrid}, 가독성을 위해 스타일을 한 곳에서 관리하고 싶어 테마 안에 설정하였다.
• 또한 매번 styleOverride와 root를 설정해주기 번거로워, 함수로 작성하는 방식을 선택했다.

function componentsStyle(name: string, styles: Record<string, any>) {
  return {
    [name]: {
      styleOverrides: {
        root: {
          ...styles,
        },
      },
    },
  };
}

const theme = createCustomTheme = () => createTheme({
  ...componentsStyle("MuiGrid", {
    ...스타일 작성
  })
})