styled components default theme typescript

1// import original module declarations
2import 'styled-components';
3
4// and extend them!
5declare module 'styled-components' {
6  export interface DefaultTheme {
7    borderRadius: string;
8
9    colors: {
10      main: string;
11      secondary: string;
12    };
13  }
14}

1interface YourProps {
2  invalid: boolean
3}
4
5const Input = styled.input`
6  border: ${(p: YourProps) => p.invalid ? 'red' : 'blue'};
7`
8