Using styled-components with props and TypeScript

Question

I'm trying to integrate TypeScript into our project and so far I stumbled upon one issue with styled-components library.

Consider this component

import * as React from "react";
import styled from "styled-components/native";
import { TouchableOpacity } from "react-native";

// -- types ----------------------------------------------------------------- //
export interface Props {
  onPress: any;
  src: any;
  width: string;
  height: string;
}

// -- styling --------------------------------------------------------------- //
const Icon = styled.Image`
  width: ${(p: Props) => p.width};
  height: ${(p: Props) => p.height};
`;

class TouchableIcon extends React.Component<Props> {
  // -- default props ------------------------------------------------------- //
  static defaultProps: Partial<Props> = {
    src: null,
    width: "20px",
    height: "20px"
  };

  // -- render -------------------------------------------------------------- //
  render() {
    const { onPress, src, width, height } = this.props;
    return (
      <TouchableOpacity onPress={onPress}>
        <Icon source={src} width={width} height={height} />
      </TouchableOpacity>
    );
  }
}

export default TouchableIcon;

Following line throws 3 errors, that are same in nature <Icon source={src} width={width} height={height} />

Type {source: any; width: string; height: string;} is not assignable to type IntrinsicAttributes ... Property 'onPress' is missing in type {source: any; width: string; height: string;}

Not entirely sure what this is and how to fix it, do I somehow need to declare these on Icon or something of this sort?

EDIT: typescript v2.6.1, styled-components v2.2.3

score 197 · Answer 1 · answered Aug 27 '18 at 19:18

197

There have been some recent developments and with a new version of Typescript (eg. 3.0.1) and styled-components (eg. 3.4.5) there's no need for a separate helper. You can specify the interface/type of your props to styled-components directly.

interface Props {
  onPress: any;
  src: any;
  width: string;
  height: string;
}

const Icon = styled.Image<Props>`
  width: ${p => p.width};
  height: ${p => p.height};
`;

and if you want to be more precise and ignore the onPress

const Icon = styled.Image<Pick<Props, 'src' | 'width' | 'height'>>`
  width: ${p => p.width};
  height: ${p => p.height};
`;

answered Aug 27 '18 at 19:18

elnygren

5,000
4
20
31

3

Neat! Works well with themes too. This should be the selected answer. Only problem is it breaks my syntax highlighting... – Brendan McGill Mar 23 '19 at 16:41
4

Shouldn't it be `styled.image`? – David Casanellas Mar 26 '19 at 15:00
@ManuRauck I don't agree. Type {source: any; width: string; height: string;} is not assignable to type IntrinsicAttributes ... Property 'onPress' is missing in type {source: any; width: string; height: string;} onPress is clearly missing, so onPress is a prop of Image – David Casanellas Nov 22 '19 at 13:01
Can anyone recommend the solution to make Typescript accept keyframes with params? – Jurijs Kovzels Apr 20 '20 at 12:34
1

Can use styled.Image>` which is a lil shorter – Declan Fitzpatrick Feb 13 '22 at 18:26

Gian Marco Toso · Accepted Answer · 2019-07-01T20:09:42.793

This answer is outdated, the most current answer is here: https://stackoverflow.com/a/52045733/1053772

As far as I can tell there is no official way (yet?) to do this, but you can solve it with a bit of trickery. First, create a withProps.ts file with the following content:

import * as React from 'react'
import { ThemedStyledFunction } from 'styled-components'

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

export { withProps }

Now, inside your .tsx files, use it like this:

// ... your other imports
import { withProps } from './withProps'

export interface IconProps {
  onPress: any;
  src: any;
  width: string;
  height: string;
}

const Icon = withProps<IconProps>()(styled.Image)`
  width: ${(p: IconProps) => p.width};
  height: ${(p: IconProps) => p.height};
`;

And you should be good to go. It's definitely not ideal and hopefully there will be a way to provide generics to template literals soon in TS, but I guess that for now this is your best option.

Credit is given where credit is due: I copypasted this from here

This was a great solution, but @elnygren's comment below is definitely the most elegant current solution. — Martin, May 13 '19 at 16:00

score 18 · Answer 3 · answered Mar 31 '22 at 12:58

The easiest way as styled-components docs said:

import styled from 'styled-components';
import Header from './Header';

const NewHeader = styled(Header)<{ customColor: string }>`
  color: ${(props) => props.customColor};
`;
// Header will also receive props.customColor

score 13 · Answer 4 · answered Apr 04 '21 at 15:12

styled-component

    import styled from 'styled-components';

interface Props {
    height: number;
}

export const Wrapper = styled.div<Props>`
    padding: 5%;
    height: ${(props) => props.height}%;
`;

index

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>
);

should work

MarcosSantosDev · Answer 5 · 2022-10-06T02:42:07.073

You need only specify a interface:

import { createGlobalStyle, css } from 'styled-components';

interface PropsGlobalStyle {
  dark: boolean
}

export default createGlobalStyle`
  ${({ dark }: PropsGlobalStyled) => css`
    body {
      box-sizing: border-box;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: ${dark ? '#fff' : '#000'};
      background-color: ${dark ? '#000' : '#fff'};
    }
  `};
`;

score 6 · Answer 6 · answered Jul 25 '21 at 20:14

6

An example using ColorCard with color prop

import styled from 'styled-components';

export const ColorCard = styled.div<{ color: string }>`
  background-color: ${({ color }) => color};
`;

answered Jul 25 '21 at 20:14

1

it is amazing, thanks – kahonmlg Jan 27 '22 at 13:57
1

This should be accepted answer – Hidayt Rahman Feb 09 '22 at 07:30

score 3 · Answer 7 · answered Oct 12 '21 at 00:38

3

The answer from @elnygren worked for me. Just one question from me. How to assign a default value to the following code (copied from the answer of @elnygren). e.g. If I do not want to pass any value to the 'width' and 'height' a default value will be used.

const Icon = styled.Image<Pick<Props, 'src' | 'width' | 'height'>>`
  width: ${p => p.width};
  height: ${p => p.height};
`;

answered Oct 12 '21 at 00:38

Nazmul Hossain Rakib

51
8

If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/late-answers/30053638) – no ai please Oct 12 '21 at 03:33

score 1 · Answer 8 · answered Nov 02 '17 at 14:36

I'm struggling through this myself, but I think the problem is that you are using the Props interface inside the styled component. Try creating another interface with just the image props and use that in your styled component:

import * as React from "react";
import styled from "styled-components/native";
import { TouchableOpacity } from "react-native";

// -- types ----------------------------------------------------------------- //
export interface Props {
  onPress: any;
  src: any;
  width: string;
  height: string;
}


export interface ImageProps {
  src: string;
  width: string;
  height: string;
}

// -- styling --------------------------------------------------------------- //
const Icon = styled.Image`
  width: ${(p: ImageProps ) => p.width};
  height: ${(p: ImageProps ) => p.height};
`;

class TouchableIcon extends React.Component<Props> {
  // -- default props ------------------------------------------------------- //
  static defaultProps: Partial<Props> = {
    src: null,
    width: "20px",
    height: "20px"
  };

  // -- render -------------------------------------------------------------- //
  render() {
    const { onPress, src, width, height } = this.props;
    return (
      <TouchableOpacity onPress={onPress}>
        <Icon source={src} width={width} height={height} />
      </TouchableOpacity>
    );
  }
}

export default TouchableIcon;

Seems to work but I hate to have to duplicate those interfaces. Hopefully someone else can show the correct way or maybe embedding the ImageProps into Props?

This didn't work for me, but tmp workaround is `const Icon: any = styled.Image` I have no idea why it works, however — Ilja, Nov 02 '17 at 14:47
Glad you got it to work, that worked for me as well. I am in react-dom so maybe there is some difference there. — thul, Nov 02 '17 at 15:03
that's what I needed: `width: ${(p: ImageProps ) => p.width};` — Andrii Kovalchuk, Jun 15 '18 at 11:08

Using styled-components with props and TypeScript

8 Answers8

Linked

Related