styled-components) Props를 이용하여 스타일링하기 -1

styled-components) Props를 이용하여 스타일링하기 - 1

styled-components와 Emotion의 가장 큰 장점은 템플릿 리터럴을 이용하여 스타일링을 보다 쉽게 할 수 있다는 장점이 있다.

예를 들어서 프로젝트를 진행할 때 디자이너가 개발을 사용할 때 쓰일 색상들을 미리 정해주면

<theme.ts>

export const colorTheme = {
  bgColor: '#ffffff',
  textColor: '#000000',
  toggleBorder: '#FFF',
  gradient: 'linear-gradient(#39598A, #79D7ED)',
  grayColor: '#FBFCFD',
};

이런 식으로 미리 코드에 작성한다.

import React, { useState } from 'react';
import type { AppProps } from 'next/app';
import { ThemeProvider } from 'styled-components';
import { colorTheme } from 'styles/theme';
import { GlobalStyle } from 'styles/global-style';
import Container from 'components/Container';

function App({ Component, pageProps }: AppProps) {
  const [theme, setTheme] = useState(colorTheme);

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Component {...pageProps} theme={theme} />
    </ThemeProvider>
  );
}
export default App;

그 후 ThemeProvider를 이용하요 스타일 속성을 받을 컴포넌트 렌더트리 최상단에 배치한다.

const Divider = styled.div`
  background: ${({ theme }: { theme: any }) => theme.grayColor};
  width: 100%;
  height: 3px;
  box-shadow: rgb(0 0 0 / 10%) 0px 0px 8px;
`;

그렇다면 위와 같이 우리가 저장해놓은 테마를 바탕으로 사용할 때마다 색상코드를 입력할 필요 없이 쓸 수 있다.