Material-ui란?
React 개발에서 쉽게 사용할 수 있는 UI Framework이다.
- 설치
yarn add @material-ui/core-
사용법
사용하고자 하는 항목 import
styles을 이용하여 각 component 커스터마이징
공식 홈페이지에 모든 component의 예제가 코드와 함께 제공됨 -
Material-UI with Styled-Component
import { StylesProvider } from '@material-ui/core/styles';
<StylesProvider injectFirst>
{/* 여기에 스타일링된 컴포넌트를 넣습니다.
styled components는 Material-UI의 스타일을 오버라이드합니다. */}
</StylesProvider>- 완성된 컴포넌트
import React from 'react';
import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import { StylesProvider } from '@material-ui/core';
const MyButton = styled(Button)`
background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
border: 0;
border-radius: 3px;
box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
color: white;
height: 48px;
padding: 0 30px;
`;
export default function StyledComponents() {
return (
<StylesProvider injectFirst>
<MyButton>Styled Components</MyButton>
</StylesProvider>
);
}Next JS + Material UI + Styled Component 설정
- styled-component용 babel plugin 설치
yarn add -D babel-plugin-styled-components- 프로젝트용 Babel 설정
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}보통은 _document.js 파일 없이도 Next.js를 사용 가능하지만 기본 설정을 override 하기 위해 파일을 생성 후 아래의 코드를 입력한다.
import React from "react";
import Document, { Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/styles";
import { ServerStyleSheet } from "styled-components";
class _Document extends Document {
static async getInitialProps(ctx) {
const styledComponentsSheet = new ServerStyleSheet();
const materialSheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
styledComponentsSheet.collectStyles(
materialSheets.collect(<App {...props} />)
),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<React.Fragment>
{initialProps.styles}
{materialSheets.getStyleElement()}
{styledComponentsSheet.getStyleElement()}
</React.Fragment>
),
};
} finally {
styledComponentsSheet.seal();
}
}
render() {
return (
<html lang="en" dir="ltr">
<Head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
export default _Document;마찬가지로 _app.js 파일도 별도의 설정 없이 Next.js를 사용 가능하지만
Server-side 에서 삽입한 CSS를 제거하고 테마를 프로젝트 전체적으로 Provide 하고 Material-ui의 css를 프로젝트에 설정하기 위해 아래의 코드를 삽입한다.
import React from "react";
import Head from "next/head";
import App from "next/app";
import { ThemeProvider } from "styled-components";
import CssBaseline from "@material-ui/core/CssBaseline";
import theme from "../src/theme";
class _App extends App {
componentDidMount() {
// 서버사이드에서 삽입한 CSS를 제거
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles) {
jssStyles.parentNode.removeChild(jssStyles);
}
}
render() {
const { Component, pageProps } = this.props;
return (
<>
<Head>
<title>My page</title>
</Head>
<ThemeProvider theme={theme}> // 테마 정보를 Provide
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</>
);
}
}
export default _App;- mui를 사용하여 만든 예시
에러와 부딪히고 새로운 것을 배우며 성장해가는 과정을 기록합니다!