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'};`
You might Also Like