How can I use styled-components with TypeScript?

How can I use styled-components with TypeScript?

You can use styled-components with TypeScript by installing the necessary types and defining your styled components with type safety.

What packages do I need to install?

You need to install styled-components and @types/styled-components for TypeScript support.

Can you show me a simple example?

Sure! Here's a basic example:

import styled from 'styled-components';

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

<Button primary>Click Me</Button>

How do I type props for my styled components?

You can define props by using TypeScript generics in the styled function, like in the Button example above.