@types/styled-components

What is @types/styled-components?

The @types/styled-components package provides TypeScript type definitions for the styled-components library, which is a popular CSS-in-JS library. These type definitions allow TypeScript developers to use styled-components in a type-safe manner, ensuring that styles are applied correctly and that component props are managed according to their expected types.

What are @types/styled-components's main functionalities?

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;
`;

Other packages similar to @types/styled-components

@emotion/styled

Similar to styled-components, @emotion/styled also allows for defining styles directly in JavaScript or TypeScript. It offers a similar API but focuses more on performance optimizations and has a slightly different syntax for defining styles with the css prop.

jss

JSS (JavaScript Style Sheets) is another CSS-in-JS library that allows for similar styling capabilities. While it provides a different API than styled-components, it supports plugins and dynamic styling, making it a flexible alternative.

README

Installation

npm install --save @types/styled-components

Summary

This package contains type definitions for styled-components (https://github.com/styled-components/styled-components).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/styled-components.

Additional Details

• Last updated: Tue, 30 Nov 2021 20:31:04 GMT
• Dependencies: @types/csstype, @types/react, @types/hoist-non-react-statics
• Global values: none

Credits

These definitions were written by Igor Oleinikov, Ihor Chulinda, Adam Lavin, Jessica Franco, Jason Killian, Sebastian Silbermann, David Ruisinger, Matthew Wagerfield, Yuki Ito, Maciej Goszczycki, Danilo Fuchs, and Aaron Reisman.