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 are the steps to install styled-components in a TypeScript project?

First, install styled-components and its types using npm or yarn: npm install styled-components @types/styled-components. Then, you can start creating styled components.

Can you show me an example of a styled component in TypeScript?

Sure! Here's a simple example:

import styled from 'styled-components';

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

This defines a Button component that can accept a primary prop.

How do I type props for a styled component?

You can type props by using TypeScript's generic feature. For example, styled.button<{ primary?: boolean }> allows you to define the types of props.