Search code examples
reactjsstyled-components

How to extend a styled component to another component using props?

I'm a benninger learning React with Styled Components.

App.js

const BasicButton = styled.button`
  background-color: purple;
`;

Increase.js

const StyledButtonIncrease = styled(props.BasicButton)`
  padding: 2rem;
  border: none;
  border-radius: 7px;
`;

How can I receive a Styled Component in another React component to extend the styling? I tried to use the example above but it didn't work.

Solution

  • What you will actually do is export the styled that you want to extend and import it in the file that you will create your new styled.

    ex:

    App.js

    export const BasicButton = styled.button`
  background-color: purple;
`;

    increase.js

    import { BasicButton } from '../App.js';

const StyledButtonIncrease = styled(BasicButton)`
  padding: 2rem;
  border: none;
  border-radius: 7px;
`;