styled-components를 JSX component에 적용하는 방법 (Typescript)

styled-components 적용 원리

styled-components는 class 이름에 값이 들어가면서 CSS가 적용된다. 따라서 일반적인 html element가 아니라 JSX component처럼 다른 컴포넌트에 적용시킬 때는 className을 넘겨줘야 한다.

실제 적용 코드

styled에 ()를 통해 인자를 넘길 수 있다.

import GroupPage from "./GroupPage";
import ToDoPage from "./ToDoPage";
import styled from "styled-components";

type pageProps = { className: string };

function MainPage() {
  return (
    <Wrapper>
      <GroupPageWrapper className="" />
      <ToDoPageWrapper className="" />
    </Wrapper>
  );
}

export default MainPage;

const Wrapper = styled.div`
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(12, 1fr);
`;

const GroupPageWrapper = styled((props: pageProps) => <GroupPage {...props} />)`
  background-color: red;
  grid-column: 1/4;
`;

const ToDoPageWrapper = styled((props: pageProps) => <ToDoPage {...props} />)`
  background-color: blue;
  grid-column: 4/9;
`;

!! TS 적용 부분

TS에게 실제 prop이 셋팅되어 해당 컴포넌트로 넘어간다는 것을 알려줘야 하므로 다음과 같이 코드를 작성한다.

styled((props: pageProps) => <GroupPage {...props} />)

className=""

이 부분을 생략하면 ts가 필요인자를 넘기지 않았다고 경고하므로 빈 문자열을 넘겨준다. 어차피 props로 넘어간 값으로 셋팅된다!

styled-components가 적용된 컴포넌트

컴포넌트에서 props를 통해 className을 전달받아 설정해줘야한다. props가 어떤 형식인지 type을 통해 명시했다.

type pageProps = { className: string };

function GroupPage(props: pageProps) {
  return (
    <div className={props.className}>
      <Groups />
      <NewGroup />
    </div>
  );
}
export default GroupPage;