목표
- 재사용성이 높은 버튼 만들기
- 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으로 변해서 내려간다.