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

bluejoy·2023년 4월 13일
0

React

목록 보기
10/19

목표

  • 재사용성이 높은 버튼 만들기
  • 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으로 변해서 내려간다.
profile
개발자 지망생입니다.

0개의 댓글