Material UI 설정하기

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

기록

Material UI 설정하기 본문

Next

Material UI 설정하기

dev.jung 2021. 7. 2. 16:50

Package 설치

npm i @material-ui/core 
npm i -D @types/material-ui

커스텀

material ui의 버튼 커스텀
theme 설정

src/styles/theme.ts

import { createMuiTheme } from '@material-ui/core';

export const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        background: '#fac499',
        color: '#ffffff'
      }
    }
  }
});

material theme 주입
src/_app.tsx

import { ThemeProvider } from '@material-ui/styles';
import type { AppProps } from 'next/app';
import { theme } from 'styles/theme';

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
};
export default MyApp;

next dev 와 next build && next start 의 환경차이

dev

build && start

dev 환경에서는 빠른개발을 위하 빌드로 실행이된다.
nextjs 의 특징인 사전렌더링이되지않는 모습이고 production 환경에서 는 사전렌더링으로 인해
material 스타일이 뒤늦게 렌더 되는모습을 볼수있다.

사전 렌더링에서도 적용이되게 수정을 해보자.

src/page 폴더에 _document.tsx 파일을 생성한다.
이 파일은 서버측에서바로 렌더링을 시킬수있는 파일이다.
페이지가 렌더링될때 material 을 서버사이드로 렌더링시키는 소스이다.

import React from 'react';
import Document, {
  Html,
  Main,
  Head,
  NextScript,
  DocumentContext
} from 'next/document';
import { ServerStyleSheets } from '@material-ui/core';

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const materialSheet = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: App => props => materialSheet.collect(<App {...props} />)
      });

    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: [
        ...React.Children.toArray(initialProps.styles),
        materialSheet.getStyleElement()
      ]
    };
  }

  render() {
    return (
      <Html lang='ko'>
      	<Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

잘 작동한다.