How can I use TypeScript types with Styled Components?

How can I use TypeScript types with Styled Components?

You can define TypeScript types for your styled components by creating interfaces for your props. This helps ensure type safety.

Can you show me an example of defining types for a styled component?

Sure! Here's a simple example:

import styled from 'styled-components';

interface ButtonProps {
  primary?: boolean;
}

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

This defines a Button component that accepts a primary prop.

What if I want to add more props to my styled component?

You can simply extend the ButtonProps interface to include additional props. For example:

interface ButtonProps {
  primary?: boolean;
  size?: 'small' | 'medium' | 'large';
}

Then, you can use the size prop in your styled component as well.

Is there a way to use default props with TypeScript?

Yes! You can set default props using the defaultProps property on your styled component. For example:

Button.defaultProps = {
  primary: false,
  size: 'medium',
};