How can I use dynamic styling in React with styled-components?

How can I use dynamic styling in React with styled-components?

You can use props to pass dynamic values to styled-components. For example, you can create a styled button that changes color based on a prop.

Can you show me an example of that?

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 change the size of the button dynamically?

You can also pass a size prop to control the button's size. For instance:

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

<Button size='large'>Large Button</Button>
<Button>Default Button</Button>

Are there any performance considerations I should be aware of?

Yes, excessive dynamic styling can lead to performance issues. It's best to limit the number of props and avoid complex calculations in styled-components.