Styled-component-usage.md

Styled component use case

Styled component as standard react component

avoid creating middleware react component

before

const StyledIcon = styled(Icon)``; export const HomeIcon = () => ;

after

export const CameraIcon = styled(Icon)``; CameraIcon.defaultProps = { uri: 'btn-sell.svg', };

advantage: can avoid creating react component in the middle

As default component

before

const StyledButton = styled.buttonborderradius: 2; border: 0; background: none;;

export const Button = ({ children, onClick = () => {} }: buttonType) => ( {children} );

after

export const Button = styled.buttonborder: 0; background: none;;

advantage: code is simple and more readable

Inheritance

export const PlainButton = Display2.withComponent(CoreButton).extendpadding: 5px 10px;;