React에서 Material-UI + styled-components 조합 사용하기

mandarin / Kim Hyeok-Jun·2020년 9월 15일

프로젝트를 진행할때면 빠르게 UI를 구성해야 할 때가 있죠. React 쪽에서 많이 쓰이는 라이브러리인 Material-UI입니다. 구글의 Material Design을 잘 적용해 놓았죠. 깔끔합니다.

또한 이번에 쓰는 styled-components는 CSS-in-JS 스타일로 많이 쓰이죠, CSS를 적용하는게 매우 간편해졌습니다.

styled-components API를 사용해서 스타일링 하기

styled-components를 사용해서 컴포넌트 자체를 스타일링 하는 방법은 이러했죠. 만약 Material UI의 Button 컴포넌트를 스타일링 한다면 이렇게 될겁니다.

import React from 'react';
import styled from 'styled-components';
import Button from '@material-ui/core/Button';

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 <MyButton>Styled Components</MyButton>;
}

모양이 나오긴 나왔지만 일부가 적용이 안된 모습을 볼 수 있었습니다. 패딩이나, 폰트 색상도 적용이 안됐죠. 이를 해결할 방법을 찾아봅시다.

Material-UI의 styled 사용하기

Material UI 자체에서 여러 스타일링 방법을 제공하는데요, 이중에 styled-components와 비슷한 모양의 방법도 지원합니다.

import React from 'react';
import { styled } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const MyButton = styled(Button)({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  border: 0,
  borderRadius: 3,
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  color: 'white',
  height: 48,
  padding: '0 30px',
});

export default function StyledComponents() {
  return <MyButton>Styled Components</MyButton>;
}

먼저,styled-components의 styled가 아닌 @material-ui/core/styles의 styled를 가져와서 사용합니다.

그 다음, styled(Button) 이후 백틱이 아닌 () 안에 오브젝트 형식의 스타일링을 사용합니다. border-radius가 borderRadius로 바뀐것처럼요.

그래도 난 styled-components 문법을 쓰고싶다.

지원해주는 것도 좋지만, 여전히 styled-components를 쓰고 싶은 마음이 있죠. 그럴땐 Material-UI의 StylesProvider 컴포넌트로 감싸고 injectFirst props을 주면 됩니다.

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