styled-component+ts props 전달하기

typescript환경에서 styled-components에 props를 전달하려면 제네릭을 활용하면 된다.
나는 next.js를 사용중이라 @emotion/styled를 사용하였다.

예시

interface blockType {
  blockColor: string;
  sizeOfRowCol: number;
}

const Block = styled.div<blockType>`
  background: ${(props) => props.blockColor};
  width: ${(props) => (BlockWrapperSize - 10) / props.sizeOfRowCol}px;
  height: ${(props) => (BlockWrapperSize - 10) / props.sizeOfRowCol}px;
  margin: 2px;
  box-sizing: border-box;
`;

실제 사용할 때는 컴포넌트에 props를 내려주고 접근하여 사용하면 된다.

<BlockWrapper>
  {colorTable.map((block, idx) => (
    <Block blockColor={block.color} sizeOfRowCol={2} key={idx}>
      &nbsp;
    </Block>
  ))}
</BlockWrapper>