How do I provide props to styled elements in Typescript?

Question:

I looked at the docs and other than creating a whole empty component purely for providing a definition of props I'm not sure of if it's possible to provide custom props to a styled element other than theme.

const input=  styled.input'boder: 4 {p=> p.invalid? 'green':'orange'}; 

Best Answer


import styled, { StyledFunction } from "styled-components"

interface YourProps {
  invalid: boolean
}

const input: StyledFunction<YourProps & React.HTMLProps<HTMLInputElement>> = styled.input

const Input = `input  border: ${p > p.invalid ? 'red': 'green'};`