You can override an existing styled-components component by passing it to the
For example, suppose you have the following styled
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> </> );
Hope you found this post useful. It was published . Please show your love and support by sharing this post.