[next js] mui (storybook에도 적용시켜보는..)

모두모두 하나하나 다 만들어 사용할 수 있지만 조금 (약간 더 많이) 도움을 받을 수 있는 MUI(material-ui) 설치해보기

MUI

설치

yarn add @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/styles

기본 사용

컴포넌트 사용

기존 만들어져있던 app/pages.tsx에서 간단한 Button 태그를 추가

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

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Button variant="outlined">222</Button>
    </main>
  );

사진처럼 버튼 생성 확인 가능!

기본 테마 설정

createTheme를 사용하여 기본으로 설정되어있던 mui의 테마를 설정 가능
다양한 테마가 필요한 경우 theme 폴더에 커스텀 테마들을 생성

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

export const theme = createTheme({
  palette: {
    primary: {
      main: '#BCE55C',
    },
  },
});

위에 설정한 테마를 최상단 혹은 사용이 필요한 곳에서 ThemeProvier에 추가하여 원하는 테마로 설정하여 mui 사용

import { ThemeProvider } from '@mui/material'
import { theme } from '../theme'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

storybook 설정

storybook에서도 작성해둔 커스텀 테마에 적용된 mui테마를 사용하고싶은 경우 아래와 같은 형태로 ThemeProvider을 감싸줘서 사용 가능

<ThemeProvider theme={theme}>
      <CustomButton {...args}></CustomButton>
    </ThemeProvider>

decorator

컴포넌트 렌더링 시점에서 추가적인 스타일이나 provider등을 감싸주기 위해 사용되는 함수

하나의 story마다 감싸주지 않고 .storybook/preview.ts 파일에서 preview 타입을 설정하여 전체에 적용되도록 사용

아래와 같은 형태로 작성
파라미터로 들어오는 Story는 작성한 .stories.*파일이 보여질 영역, context는 globalTypes 값을 포함하고 있는 객체

// preview-decorator1.tsx
import React from "react";
import { Decorator } from "@storybook/react";
import { ThemeProvider } from "@mui/material";

const previewDecorator: Decorator = (Story, context) => {
  return (
    <ThemeProvider theme={customtheme}>
      <Story {...context} />
    </ThemeProvider>
  );
};

export default [previewDecorator];

/.storybook/preview.ts파일에 decorators 옵션 추가

// preview.ts
import type { Preview } from "@storybook/react";
import previewDecorators1 from "./preview-decorators1";

const preview: Preview = {
  decorators: previewDecorators,
};

export default preview;

storybook 실행하면 사진처럼 커스텀 테마에 적용된 컴포넌트가 나옴

---

mui 사용

mui 문서에 있는 다양한 컴포넌트들과 그 옵션들로 다양하게 사용 가능 (docs에 너무나도 자세히 나와있음)

한번 짚고 넘어가고싶었던 다양한 스타일링 방법에 관련된 부분들을 한번 언급하겠음
알맞은 방법으로 편하고 간결한 코드 작성 가능 ㅠ

스타일링 방법들

sx

컴포넌트에 상세 스타일링하고 싶은 경우 컴포넌트의 옵션에 있는 sx props를 사용

<Button sx={{ backgroundColor: "pink" }} >
      button
</Button>

styled-component

styled-component를 사용하여 컴포넌트 자체를 스타일링

import { styled } from '@mui/system';

const CustomButton2 = styled(Button)({
  backgroundColor:"pink"
});

export default function Page() {
  return <CustomButton2>button</CustomButton2>;
}

ThemeProvider

원하는 컴포넌트들의 테마를 지정해두고 싶은 경우
mui에서 제공되는 컴포넌트에서 스타일링을 변경하여 지속적으로 사용하고 싶은경우 위에서 사용한 createTheme를 사용하여 상세 스타일링 설정가능
components의 styleOverrides에 원하는 스타일링 입력

export const customtheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          backgroundColor: "blue",
        },
      },
    },
  },
});

아래의 코드처럼 사용하면

<Button>button</Button>

button에 배경색을 따로 지정해주지 않아도 기본 지정해둔 색상으로 나옴

컴포넌트가 아닌 전체적으로 적용하고 싶은 코드가 있다면
cssbaseline에 글로벌 스타일링을 추가해주고

const theme = createTheme({
   components: {
        MuiCssBaseline: {
            styleOverrides: {
                "*": {
                   fontSize:'20px'
                },
                body: {
                    height: "100%",
                    width: "100%"
                },
               ...
            }
        }
    }
});

최상단 컴포넌트에 CssBaseLine을 추가해주면 쌉가능

import {CssBaseline} from '@mui/material
...
...
<ThemeProvider theme={theme}>
	 <CssBaseline />
     <CustomButton {...args}></CustomButton>
</ThemeProvider>