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

Answer 1

If someone were stucked with some of Ant Design components like I was, here is how you can extend their components, like Table:

import { Table, TableProps } from "antd";
import styled, { css } from "styled-components";

const StyledTable = styled(Table)<TableProps & { $lockScroll: boolean }>`
  ${({ $lockScroll }) => $lockScroll &&
    css`
      .ant-table-body {
        overflow-y: hidden;
      }`
    }
`;

and usage as always:

const [lockScroll, setLockScroll] = useState(false);

// here you can manipulate value dependent on your logic

return (
  <StyledTable
    $lockScroll={lockScroll}
    // other props
  />
);

Typescript is really incredible! Hope it helps someone!

Answer 2

The docs state:

If you want to prevent props meant to be consumed by styled components from being passed to the underlying React node or rendered to the DOM element, you can prefix the prop name with a dollar sign ($), turning it into a transient prop.

Answer 3

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

Answer 4

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

Answer 5

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};
`;

Answer 6

An example using ColorCard with color prop

import styled from 'styled-components';

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

Answer 7

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

Answer 8

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

Answer 9

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};
`;

Answer 10

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?