fredwong-it
Published in

fredwong-it

Styled Component — refactor to css with props in TypeScript

I have this code currently in my PR and my teammate left comment that we can refactor this to re-use style with css.

Original code

const StyledAppleIcon = styled(ApplenIcon)<{
$width: number,
$height: number,
$color: string
}>`
width: ${({ $width }) => $width}px;
height: ${({ $height }) => $height}px;
color: ${({ $color }) => $color};
`;
const StyledOrangeIcon = styled(OrangeIcon)<{
$width: number,
$height: number,
$color: string
}>`
width: ${({ $width }) => $width}px;
height: ${({ $height }) => $height}px;
color: ${({ $color }) => $color};
`;

Now refactor to

const fruitStyle= css<{
$width: number,
$height: number,
$color: string
}>`
width: ${({ $width }) => $width}px;
height: ${({ $height }) => $height}px;
color: ${({ $color }) => $color};
`;

const StyledAppleIcon = styled(AppleIcon)`
${fruitStyle}
`;
const StyledOrangeIcon = styled(OrangeIcon)`
${fruitStyle}
`;

Reference:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store