@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: Fri, 31 Jul 2020 20:41:30 GMT
• Dependencies: @types/csstype, @types/react, @types/hoist-non-react-statics, @types/react-native
• 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, and Danilo Fuchs.