How to override css in styled components

Solution

To override css in styled components, you have to pass styled css component in styled function and override any css property.

Snippet

In this snippet, we will create button styled component and override his css property in primary button styled components.

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

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

Example

n this example, we will styled componets library and create to styled components button and primary button, in primary button styled components. we will override some css.

Let’s start coding…

App.js

import styled from 'styled-components';

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

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

const Example1 = () => {
  return (
    <div>
      <Button>Normal</Button>
      <PrimaryButton>Override</PrimaryButton>
    </div>
  );
};

export default Example1;

Output

Links

Here, we are provided code sandbox links for the above program override css in styled components. then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.