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

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;

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)

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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related