React Material UI - Styled 컴포넌트

공식문서에 의하면 custom MUI 컴포넌트를 만들기 위해 필요한 도구이다. 즉, 다시말해 모든 MUI 컴포넌트는 default로 styled 컴포넌트에 기반하여 만들어졌다.

• styled컴포넌트와 sx prop을 함께 쓰면 완전 독립적인 커스텀 MUI 컴포넌트를 만들 수 있다. 아래와 같이 말이다.

  import * as React from 'react';
  import { styled } from '@mui/system';
  
  const MyComponent = styled('div')({
    color: 'darkslategray',
    backgroundColor: 'aliceblue',
    padding: 8,
    borderRadius: 4,
  });
  
  export default function BasicUsage() {
    return <MyComponent>Styled div</MyComponent>;
  }

  또는 MUI에서 제공하는 theme이라는 객체를 사용할 수 있다. theme 공식문서

  아니면, theme을 override해서 custom theme을 만들어 styled component와 연계해서 사용할 수 도 있다. (이경우는 themeProvider를 이용해서 custom theme을 적용시켜줘야한다.)

  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>
    );
  }

  styled 컴포넌트에 객체가 아닌 함수를 pass하면 default theme 객체를 사용할 수 있다.