styled-component에 React.Component를 넘겨도 스타일 수정을 할 수 있을까?

[sumi-0011]

styled-component에서 forwardref를 이용하여 atomic component 만들기를 보고,
원래 styled-component에 React.Component를 넘겨도 스타일 수정을 할 수 있는지 궁금해졌다.

이 방식을 사용하면 좋다고 생각 한 이유

1. style 관련 props와 style 관련이 아닌 props를 분리할 수 있다.
2. ref를 사용할 수 있다.

++ 1번의 이유만으로 forwardref를 이용해서 만드는것은 좋지 않을것이다. atomic component에만 사용하자

결론

그래서 확인해보니!
결론적으로, 불가능 했다.
forwardref를 이용해서 ref를 styled-component에 넘겨주어야만 가능하다.

테스트 스크린샷

forwardref를 이용한 NewRefBadge만 파란색으로 변경되고,
React.Component를 넘긴 NewBadge는 바뀌지 않았다.

테스트 코드

const BadgeCore = forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
  const { children, onClick, colorScheme = 'primary', ...rest } = props;

  return (
    <Wrapper ref={ref} onClick={onClick} {...rest}>
      {children}
    </Wrapper>
  );
});

BadgeCore.displayName = 'BadgeCore';

function Badge({ children, onClick }: BadgeProps) {
  return <Wrapper onClick={onClick}>{children}</Wrapper>;
}

...


export const NewBadge = styled(Badge)`
  background-color: blue;
`;

export const NewRefBadge = styled(BadgeCore)`
  background-color: blue;
`;