Styled Components Props in TypeScript

Styled Components is a popular CSS-in-JS library that allows developers to write CSS styles using JavaScript syntax. With the power of TypeScript, Styled Components can offer even more benefits by allowing for type checking of props passed to components. In this article, we will explore how to use Styled Components with TypeScript, including the use of props and how to declare custom types for them.

Setting Up a Styled Component

Before diving into props, let's set up a basic Styled Component in TypeScript. We'll create a simple Button component and style it using Styled Components. Here's what the code looks like:

import styled from 'styled-components';

interface ButtonProps {
  primary?: boolean;
  disabled?: boolean;
}

const Button = styled.button<ButtonProps>`
  background-color: ${(props) => (props.primary ? '#007bff' : '#6c757d')};
  color: #ffffff;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')}
`;

export default Button;

In this code, we import the styled function from Styled Components and declare an interface for the props that our Button component will receive. The props can include a primary boolean and a disabled boolean.

Next, we use the styled function to create a button styled component. We use the interface we just declared as a generic type parameter to define the ButtonProps type. Finally, we export the Button component.

Using Props in a Styled Component

Now that we have our Button component set up, let's see how to use props to customize its styles. We can pass in props to our component just like any other React component.

Here's an example usage of our Button component:

import React from 'react';
import Button from './Button';

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Button primary>Click me</Button>
      <Button disabled>Click me</Button>
    </div>
  );
}

export default App;

In this code, we import our Button component and use it three times with different props: primary, disabled, and without any props. When we render this component, we see that each button has a different background color and cursor based on its props.

Declaring Custom Types for Props

Using TypeScript allows us to define custom types for our Styled Component props. This can provide better type safety and make it easier to catch errors at compile time.

Let's update our ButtonProps interface to include a size prop with possible values of small, medium, or large:

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

Now, when we use this prop in our component, TypeScript will ensure that only one of the three possible values is passed in.

We can also define a custom color type, like this:

type ButtonColor = 'primary' | 'secondary';

interface ButtonProps {
  color?: ButtonColor;
}

Here, we declare a ButtonColor type that only allows for the values 'primary' or 'secondary'. We then use this type in our ButtonProps interface to define a color prop.

Conclusion

In this article, we've explored how to use Styled Components with TypeScript, including how to declare custom types for props. Using TypeScript with Styled Components can provide better type safety and make it easier to catch errors at compile time. This results in more robust, reliable code.