How to Extend Existing styled-components Component?

You can extend an existing styled-components component using the styled() constructor/wrapper, for example, like so:

const ExtendedComponent = styled(MyComponent)`
  // ...
`;

To have a full picture, consider the following example:

const Button = styled.button`
  padding: 6px;
  border: none;
`;

const RoundedButton = styled(Button)`
  border-radius: 6px;
`;

This would make the RoundedButton component inherit the styling of the Button component, allowing you to add additional style rules and/or override existing ones.

You can use these buttons in your components as you normally would:

const Foo = () => (
  <>
    <Button>Original</Button>
    <RoundedButton>Extended</RoundedButton>
  </>
);