vonwao/Styled-component-usage.md

## Styled-component-usage.md

      
    Raw
  

              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 = () => <StyledIcon uri="icn-home.svg" />;

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.button`
  borderradius: 2;
  border: 0;
  background: none;
`;

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

after

export const Button = styled.button`
  border: 0;
  background: none;
`;

advantage: code is simple and more readable

Inheritance

export const PlainButton = Display2.withComponent(CoreButton).extend`
  padding: 5px 10px;
`;