React - styled-components, props, and TypeScript

Question

I looking into styled-components and trying the examples from the website but I also wanted to use TypeScript.

I have this simple example here

import React from 'react';
import './App.css';
import styled from 'styled-components';

interface IProps{
  primary: boolean
}

const App:React.FC<IProps> = ({primary}) => {
  return (
    <div className="App">
      <h1>Styled Components</h1>

      <Button>Normal</Button>
      <Button primary>Primary</Button>
    </div>
  );
}

const Button = styled.button`
  background: ${props => props.primary ? 'red' : 'white'};
  color: ${props => props.primary ? 'white' : 'red'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 1px solid green;
  border-radius: 3px;
`

export default App;

but I'm getting errors on the primary prop

I getting the error

Property 'primary' does not exist on type 'ThemedStyledProps<Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "form" | ... 264 more ... | "onTransitionEndCapture"> & { ...; }, any>'

Ho can I use styled-components with TypeScript?

Does this answer your question? Using styled components with Typescript, prop does not exist? — Agney
– Agney, Commented Apr 3, 2020 at 10:51

keikai · Accepted Answer · 2020-04-02 13:19:02Z

22

Use styled-components with typescript:

const Button = styled.button<{ primary?: boolean }>`

Full code:

import * as React from 'react';
import styled from 'styled-components';

interface IProps{
  primary?: boolean
}

const App:React.FC<IProps> = () => {
  return (
    <div className="App">
      <h1>Styled Components</h1>
      <Button>Normal</Button>
      <Button primary>Primary</Button>
    </div>
  );
}

const Button = styled.button<{ primary?: boolean }>`
  background: ${props => props.primary ? 'red' : 'white'};
  color: ${props => props.primary ? 'white' : 'red'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 1px solid green;
  border-radius: 3px;
`

export default App;

edited Apr 2, 2020 at 13:19

answered Apr 2, 2020 at 13:01

keikai

15.3k10 gold badges56 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lomine Over a year ago

I'm now getting the error that's on your CodeSandbox but my app won't show at all. The error is in the index.tsx - Property 'primary' is missing in type '{}' but required in type 'IProps'.ts(2741)

lomine Over a year ago

I fixed it with primary?: boolean in the interface

LOGAN · Accepted Answer · 2021-04-04 15:16:33Z

I prepare a example from my project

Wrapper.ts(styled-component)

import styled from 'styled-components';

interface Props {
    height: number;
}

export const Wrapper = styled.div<Props>`
    padding: 5%;
    height: ${(props) => props.height}%;
`;

index.tsx

import React, { FunctionComponent } from 'react';
import { Wrapper } from './Wrapper';

interface Props {
    className?: string;
    title: string;
    height: number;
}

export const MainBoardList: FunctionComponent<Props> = ({ className, title, height }) => (
    <Wrapper height={height} className={className}>
        {title}
    </Wrapper>
);

you can import interface/type from 'index.tsx' to 'Wrapper.ts' to reuse.
other wise you can specify type like this

export const Wrapper = styled.div<{height:number}>`

Collectives™ on Stack Overflow

React - styled-components, props, and TypeScript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related