How to pass props with styled-components with React?

Spread the love

To pass props with styled-components with React, we pass it in as its child.

For instance, we write

const StyledWrapper = styled.div`
  /* ... */
`;

const Wrapper = ({ message }) => {
  return <StyledWrapper>{message}</StyledWrapper>;
};

to create the StyledWrapper component from the styled-components styled.div tag.

Then we create the Wrapper component that takes the message prop and pass it in as its child.

By John Au-Yeung