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

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.

CodePudding user response：

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;
`;