How do I provide props to styled elements in Typescript?

[tal]

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.

Example

For the above example I don't know how to make it not error.

[kitten]

@tal Assuming that TypeScript infers the generics correctly — Disclaimer 😉 I haven't used SC with TypeScript yet — you'll just need to type your interpolation argument:

const Input = styled.input`
  border: ${(p: YourProps) => p.invalid ? 'red' : 'blue'};
`

[tal]

Unfortunately it also errors at call site. I need a way to put generics in I think

…

On Thu, Mar 30, 2017 at 7:04 PM Phil Plückthun ***@***.***> wrote: @tal <https://github.com/tal> Assuming that TypeScript infers the generics correctly — Disclaimer 😉 I haven't used SC with TypeScript yet — you'll just need to type your interpolation argument: const Input = styled.input` border: ${(p: YourProps) => p.invalid ? 'red' : 'blue'};` — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#630 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABJ2rxp8PI2i2qOGk_Ym6ZHqA4Lz4Xfks5rrDUEgaJpZM4Mu9JF> .

[mxstbr]

/cc @styled-components/typers any ideas?

[jupl]

EDIT: Holdup. What I had just happened to fit my usecase.

This currently seems to be the best approach, albeit a bit wordy.

[giladaya]

@philpl 's approach worked for me

[beshanoe]

I'm using v2 and found this way more convinient for plain containers:

function stuc<T>(El: string = 'div') {
  type PropType = T & { children?: JSX.Element[], className?: string }
  return (props: PropType) => <El className={props.className}>{props.children}</El>
}

const Container = stuc<{customProp?: boolean}>()

const StyledContainer = styled(Container)`
  background: ${p => p.customProp ? 'red' : 'blue'};
`

[patrick91]

@beshanoe hopefully we'll have a way to do this in TS (see: microsoft/TypeScript#11947)

[mxstbr]

Going to close this as there isn't much we can do right now about this, thanks for discussing!

[alloy]

This is what I use at the moment:

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' : 'blue'};
`

@alloy's solution worked great for me

I made a function wrapper for it that doesn't really do anything other than let typescript know of the types, but I think it makes the code a little more terse

import React from 'react'
import styled, { StyledFunction } from 'styled-components'

function styledComponentWithProps<T, U extends HTMLElement = HTMLElement>(styledFunction: StyledFunction<React.HTMLProps<U>>): StyledFunction<T & React.HTMLProps<U>> {
    return styledFunction
}

interface MyProps {
    // ...
}

const div = styledComponentWithProps<MyProps, HTMLDivElement>(styled.div)

[atfzl]

Extending @David-Mk's method to get theme types as shown in https://www.styled-components.com/docs/api#typescript

// themed-components.ts
import * as styledComponents from 'styled-components';
import { ThemedStyledComponentsModule } from 'styled-components';

import { ITheme } from 'theme'; // custom theme

type StyledFunction<T> = styledComponents.ThemedStyledFunction<T, ITheme>;

function withProps<T, U extends HTMLElement = HTMLElement>(
  styledFunction: StyledFunction<React.HTMLProps<U>>,
): StyledFunction<T & React.HTMLProps<U>> {
  return styledFunction;
}

const {
  default: styled,
  css,
  injectGlobal,
  keyframes,
  ThemeProvider,
} = styledComponents as ThemedStyledComponentsModule<ITheme>;

export { css, injectGlobal, keyframes, ThemeProvider, withProps };
export default styled;

// component

import styled, { withProps } from 'themed-components';

interface IProps {
  active?: boolean;
}

const Container = withProps<IProps, HTMLDivElement>(styled.div)`
  height: 100%;
  padding-right: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: ${props => props.theme.colors.black4};
  background-color: ${props => props.active ? props.theme.colors.white : props.theme.colors.grey};
`;

[Igorbek]

Another option which allows to bypass explicit element type specification, but looking a bit awkward:

import { ThemedStyledFunction } from 'styled-components';

export const withProps = <U>() =>
    <P, T, O>(
        fn: ThemedStyledFunction<P, T, O>
    ): ThemedStyledFunction<P & U, T, O & U> => fn;

so later:

interface ButtonProps {
    active: boolean;
}

//                                           / note () here
export const Button = withProps<ButtonProps>()(styled.div)`
  color: ${p => p.active ? 'red' : 'black'}
`;

[jimthedev]

@Igorbek Have you noticed that vscode's typescript styled plugin seems to not work when using any of these syntaxes?

Edit:

In the mean time I've aliased styled to themed and then add props to each of the types I want to use. Could probably be optimized more to be less ugly:

import * as themed from 'styled-components';

//...

interface IHeadingProps {
  active?: boolean;
}

const styled = {
  div: withProps<IHeadingProps>()(themed.div)
};

//...

export const Heading = styled.div`
  font-size: 22px;
`;

Edit: Opened issue here: microsoft/typescript-styled-plugin#21