Styled-components 커스텀 컴포넌트 오버라이드 시 안되는 문제

업무 중 커스텀하여 만들어진 컴포넌트를 다른 컨테이너나 컴포넌트에서 사용시 해당 공통 컴포넌트에서 className 을 넣어주어야 오버라이드한 css 값이 적용된다.

예를 들어 아래 같은 오버레이 컴포넌트르 만들자.

import { useRef, ReactNode } from 'react';
import { useOutsideClick } from '@hooks';

import styled from 'styled-components';

interface IOverlay {
  callback: () => void;
  children: ReactNode;
  className?: string;
}

const Section = styled.section`
  position: fixed;
  z-index: 98;
  width: 100%;
  height: 100%;
`;

const Overlay = ({ callback, className, children }: IOverlay) => {
  const sectionRef = useRef(null);

  useOutsideClick(sectionRef, callback);

  return (
    <Section ref={sectionRef} className={className}>
      {children}
    </Section>
  );
};
export default Overlay;

이후 다른곳에서 위의 오버레이를 사용하여 배경색을 먹이는 등 다른 커스텀 스타일링 적용

const UnClearOverlay = styled(Overlay)`
  background-color: red;
`;

여기서 Overlay 컴포넌트에서 className 이 없다면 스타일링이 적용되지 않는 문제가 있었다.

Styled-components 에서는 오버라이드 시 className props을 이용하여 CSS 클래스를 주입하는 방식으로 적용된다.
즉, styled(Overlay)를 호출하면, Overlay 컴포넌트에게 새로운 className이 전달되는 것 이다.