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?](https://stackoverflow.com/questions/52404958/using-styled-components-with-typescript-prop-does-not-exist) — Agney, Apr 03 '20 at 10:51

keikai · Accepted Answer · 2020-04-02T13:19:02.187

20

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 02 '20 at 13:19

answered Apr 02 '20 at 13:01

keikai

14,085
9
49
68

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 Apr 02 '20 at 13:12
I fixed it with `primary?: boolean` in the interface – lomine Apr 02 '20 at 13:17

score 0 · Answer 2 · answered Apr 04 '21 at 15:16

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

React - styled-components, props, and TypeScript

2 Answers2