[React.js/Material-UI] 리액트에서 Material-UI 사용하기 - custom style 적용

앞서 작성한 MUI 관련 포스팅에 이어서 쓰는 두 번째 MUI 포스팅
MUI에서 제공하는 Component를 Custom 하여 사용하고 싶을 때 여러 가지 방법이 있다.

1. withStyles

@material-ui/styles에서 제공하는 withStyle

import React from "react";
import { CssBaseline, Button } from "@material-ui/core";
import { withStyles } from "@material-ui/styles";

const App = () => {
  const StyledButton = withStyles({
    root: {
      backgroundColor: `black`,
      color: "#fff",
      "&:hover": {
        backgroundColor: "#434a4b",
      },
    },
  })(Button);
  return (
    <>
      <CssBaseline />
        <StyledButton>
          Click
        </StyledButton>
    </>
  );
};

 

2. styled components

위와 같이 작성하다 보면 한 페이지 내에 style 관련 코드와 로직 코드가 다 들어가 코드 길이가 길어진다.
이런 경우를 대비해 컴포넌트 페이지와 스타일 적용하는 페이지를 분리해야 되는데 이때 styled components를 사용하는 방법이 있다! 먼저 디펜던시를 추가해주고~

npm install styled-components

 

style.js 파일을 생성

import styled from "styled-components";
import { Button as MUIButton } from "@material-ui/core";

export const StyledButton = styled(MUIButton)`
  border: 1px solid red;
  width: 200px;
  padding: 10px 20px;
`;

styled-components와 커스텀 스타일을 적용한 컴포넌트를 material-ui에서 import 해온다
그리고 styled-componsts의 문법에 맞게 원하는 스타일링을 적용!

커스텀 된 버튼을 사용할 페이지로 돌아온다
예제를 위해 생성한 프로젝트에 App컴포넌트만 존재하므로 App.js 페이지에 적용해볼게요 🔥

import React from "react";
import { CssBaseline } from "@material-ui/core";
import { StyledButton } from "./style";

const App = () => {
  return (
    <>
      <CssBaseline />
      <StyledButton>Click</StyledButton>
    </>
  );
};

export default App;

 

style.js 파일에서 생성한 StyledButton을 import 한 후 컴포넌트를 사용하면
캡처 잘못해서 잘렸넵 ㅎ
아무튼 제가 작성한 스타일대로 생성이 되는 것을 확인할 수 있습니다

 

이제 MUI를 이용해서 간단하고 편리하게 내가 원하는 스타일로 만들 수 있겠군 ,,, 🤔
위와 같은 방법 외에 다른 방법도 있지만 일단 회사에서 자주 사용하는 방법만 서술했습니다 ~