@types/styled-components

Type-safe styled components

This feature allows developers to create styled components with TypeScript, providing type safety for props. The example shows a button component with a 'primary' prop that changes the background color based on its value.

import styled from 'styled-components';

interface ButtonProps {
  primary: boolean;
}

const Button = styled.button<ButtonProps>`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

Extending styles with TypeScript

This feature demonstrates how to extend an existing styled component while adding additional props with type definitions. The FancyButton extends BasicButton and includes a 'large' prop to adjust the font size.

import styled from 'styled-components';

const BasicButton = styled.button`
  color: white;
  background-color: black;
  padding: 5px 10px;
`;

interface FancyButtonProps {
  large: boolean;
}

const FancyButton = styled(BasicButton)<FancyButtonProps>`
  font-size: ${props => props.large ? '20px' : '12px'};
  border: 2px solid white;
`;