How to Override Styling of styled-components Component?

You can override an existing styled-components component by passing it to the styled() constructor/wrapper.

For example, suppose you have the following styled button element:

const Button = styled.button`
  border-radius: 3px;
  border: none;
  color: black;
  background: white;
`;

If you wanted to override some styling of this button to have a variation of it, you would pass the Button component as an argument to the styled() wrapper, for example, like so:

const PrimaryButton = styled(Button)`
  color: white;
  background: blue;
`;

This would make the PrimaryButton 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>
    <PrimaryButton>Overridden</PrimaryButton>
  </>
);