How do I use props in styled-components?

How do I use props in styled-components?

You can use props in styled-components to dynamically change styles based on the component's properties. For example, you can pass a prop to change the background color.

Can you show me a code example?

Sure! Here's a simple example:

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
`;

<Button primary>Primary Button</Button>
<Button>Default Button</Button>

What if I want to pass multiple props?

You can pass multiple props by using them in the styled component like this:

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  font-size: ${props => props.size === 'large' ? '20px' : '14px'};
`;

<Button primary size='large'>Large Primary Button</Button>
<Button size='small'>Small Default Button</Button>