[Material Design] Material-UI(MUI) : Styled Component Using the theme

styled() - MUI System

 

이전에 정리해놓은 기본 컴포넌트를 커스텀 하는 방법입니다.

[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <기본 theme에서 컴포넌트 커스터마이징

 

위 글에서 작성한 방법도 가능하지만, theme를 사용하여 커스텀하는 방법도 가능합니다.

(아래 코드 출처 : 메테리얼 디자인 사이트)

 

커스텀할 theme를 정의해줍니다.

import * as React from 'react';
import { styled, createTheme, ThemeProvider } from '@mui/system';

const customTheme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
      contrastText: 'white',
    },
  },
});

 

커스텀한 theme로 본인의 컴포넌트를 꼭! 감싸줍니다. (안 그러면 컴포넌트에 theme 적용이 안 됩니다.)

export default function ThemeUsage() {
  return (
    <ThemeProvider theme={customTheme}>
      ... 커스텀한 컴포넌트
    </ThemeProvider>
  );
}

 

아래와 같이 코드를 작성해주면 div를 sx 매개변수로도 커스텀 할 수 있게 됩니다. 😊😊

import * as React from 'react';
import { styled, createTheme, ThemeProvider } from '@mui/system';

const customTheme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
      contrastText: 'white',
    },
  },
});

const MyThemeComponent = styled('div')(({ theme }) => ({
  color: theme.palette.primary.contrastText,
  backgroundColor: theme.palette.primary.main,
  padding: theme.spacing(1),
  borderRadius: theme.shape.borderRadius,
}));

export default function ThemeUsage() {
  return (
    <ThemeProvider theme={customTheme}>
      <MyThemeComponent>Styled div with theme</MyThemeComponent>
    </ThemeProvider>
  );
}

div 커스텀 결과

호버됐을 때 디자인 바꾸는 법

  const StyledAppBar = styled(AppBar)(({ theme }) => ({
    backgroundColor: theme.palette.primary.main,
    transition: theme.transitions.create(["background-color", "transform"], {
      duration: theme.transitions.duration.standard,
    }),
    "&:hover": {
      backgroundColor: theme.palette.secondary.main,
      transform: "scale(1.3)",
    },
  }));