[React] Emotion js css 커스텀 컴포넌트 적용

목표

• 재사용성이 높은 버튼 만들기
• css 속성을 커스텀 컴포넌트에도 적용시키자

코드

export interface ButtonProps {
  children: ReactNode;
  onClick?: () => void;
  className?: string;
}

export const RoundedIconButton = ({
  children,
  onClick,
  className,
}: ButtonProps): ReactElement => {
  return (
    <button
      css={(theme: Theme) =>
        css`
          ${roundedIconButtonStyle(theme)}
        `
      }
      className={className}
    >
      {children}
    </button>
  );
};

export const PostButton = (): ReactElement => {
  return (
    <RoundedIconButton
      css={(theme: Theme) =>
        css`
          background-color: ${theme.colors.btn.on};
        `
      }
    >
      <ArrowUpIcon />
    </RoundedIconButton>
  );
};

• PostButton에 넣어준 css 속성이 className으로 변해서 내려간다.