Skip to content

Mui:Theming

Customize MUI with your theme. You can change the colors, the typography and much more.

Custom variables

MUI System 또는 다른 스타일링 솔루션과 함께 MUI의 테마를 사용할 때 테마에 추가 변수를 추가하여 어디에서나 사용할 수 있도록 하는 것이 편리할 수 있습니다. 예를 들어: 

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

WARNING

vars는 CSS 변수 지원에 사용되는 비공개 필드입니다.

다음과 같이 사용하려고 하면 오류가 발생합니다: 

createTheme({
  vars: { ... },
})

TypeScript를 사용하는 경우 위의 값을 수락하려면 테마에 대한 모듈 확장도 사용해야 합니다. 

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

다른 컴포넌트에서 테마를 사용할 경우 

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

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

Examples 

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

export interface ExtraTheme {
  topBarHeight: number | string;
}

declare module '@mui/material/styles' {
  interface Theme {
    extra: ExtraTheme;
  }
  interface ThemeOptions {
    extra?: Partial<ExtraTheme>;
  }
}

export const STEEL_THEME = createTheme({
  extra: {
    topBarHeight: '48px',
  } as ExtraTheme,
});

export default STEEL_THEME;

위의 테마를 사용할 경우: 

import {ThemeProvider} from '@mui/material/styles';
import STEEL_THEME from './themes';

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

See also

Favorite site