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 = () => (

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.