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 from elnygren on Stack Overflow
🌐
styled-components
styled-components.com › docs › api
styled-components
import type { CSSProperties, // Standard CSS property/value pairs CSSObject, // Object styles with nested selectors CSSPseudos, // Pseudo-class and pseudo-element selectors CSSKeyframes, // Keyframe animation definitions } from 'styled-components'; CSS custom properties (--var) also work without TypeScript errors in .attrs() and JSX style props as of v6.3.0.
🌐
LogRocket
blog.logrocket.com › home › using styled-components in typescript: a tutorial with examples
Using styled-components in TypeScript: A tutorial with examples - LogRocket Blog
June 4, 2024 - This is because each component already has its style in its body, so when you need to debug, you immediately know where to check. Let’s create one more folder: a helper folder. In the helper folder, we’ll create two files: PageText.tsx and ItemWrapper.tsx. The page has a lot of text on it with different sizes and colours. To avoid repetition, we need to create TypeScript components and pass some CSS properties as props.
Discussions

Using styled-components with props and TypeScript
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 sty... More on stackoverflow.com
🌐 stackoverflow.com
reactjs - TypeScript with styled-components - Stack Overflow
TypeScript newbie here. I have a below component using styled-components that I would like to convert to TypeScript. import React from 'react' import PropTypes from 'prop-types' import styled from ' More on stackoverflow.com
🌐 stackoverflow.com
reactjs - StyledComponents with Typescript and ThemeProvider. What are the right types? - Stack Overflow
I have problems to get the right types when using StyledComponents with ThemeProvider. I have tried it with this approach: https://github.com/styled-components/styled-components/issues/1589 My code... More on stackoverflow.com
🌐 stackoverflow.com
How do I provide props to styled elements in Typescript?
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 ... More on github.com
🌐 github.com
100
March 30, 2017
🌐
npm
npmjs.com › package › @types › styled-components
@types/styled-components - npm
TypeScript definitions for styled-components. Latest version: 5.1.36, last published: 4 months ago. Start using @types/styled-components in your project by running `npm i @types/styled-components`. There are 2126 other projects in the npm registry using @types/styled-components.
      » npm install @types/styled-components
    
🌐
GitHub
github.com › Igorbek › typescript-plugin-styled-components
GitHub - Igorbek/typescript-plugin-styled-components: TypeScript transformer for improving the debugging experience of styled-components · GitHub
This is a TypeScript transformer that improves development experience of styled-components.
Starred by 419 users
Forked by 32 users
Languages   TypeScript 97.3% | JavaScript 2.7%
🌐
npm
npmjs.com › package › typescript-plugin-styled-components
typescript-plugin-styled-components - npm
June 2, 2023 - TypeScript transformer for improving the debugging experience of styled-components. Latest version: 3.0.0, last published: 2 years ago. Start using typescript-plugin-styled-components in your project by running `npm i typescript-plugin-styled-components`. There are 58 other projects in the npm registry using typescript-plugin-styled-components.
      » npm install typescript-plugin-styled-components
    
Published   Jun 02, 2023
Version   3.0.0
Author   Igor Oleinikov
🌐
DEV Community
dev.to › griseduardo › styled-components-in-react-with-typescript-nfj
Styled-components in React with Typescript - DEV Community
December 26, 2024 - Below, I'll provide a simple example for a text component (with fewer props to keep the example concise). The idea is to apply the structure mentioned above and demonstrate how prop passing works: import styled from "styled-components"; const StyledText = styled.span` color: ${(props) => (props.$color ?
Find elsewhere
🌐
Medium
medium.com › @luxtars.dev › use-styled-components-with-typescript-73b703261d9e
Use styled-components with TypeScript | by Luxtars Dev | Medium
April 8, 2020 - Styled Components library does not ship with types. Instead, we have to install it from the Definitely Typed repository. npm i --save-dev @types/styled-components// ORyarn add -D @types/styled-components
🌐
DEV Community
dev.to › rajuashok › create-styled-d-ts-to-make-typescript-work-with-styled-components-5dk4
Create styled.d.ts to make Typescript work with styled-components - DEV Community
September 19, 2020 - import {} from 'styled-components'; import { ThemeType } from './theme'; // Import type from above file declare module 'styled-components' { export interface DefaultTheme extends ThemeType {} // extends the global DefaultTheme with our ThemeType. } import { ThemeType } from './theme'; -> This line imports my unique theme type definition from the above theme.ts file. export interface DefaultTheme extends ThemeType {} -> This line extends the global DefaultTheme to now include properties from my ThemeType. Now props.theme.primary will auto-complete and typescript will not have a compile error.
🌐
Medium
medium.com › @msgold › styled-components-in-react-and-typescript-456843804b99
Styled Components in React and TypeScript | by Michael Gold | Medium
August 29, 2023 - This article will run through an example of using the styled-components feature in React in order to style your React components with css. The prerequisite for this article is having nodejs installed. You can install it here. You can use any IDE you want to follow this article, but my tool of choice is Visual Studio Code for all React and TypeScript work.
🌐
Medium
medium.com › rbi-tech › theme-with-styled-components-and-typescript-209244ec15a3
Theme with styled-components and Typescript | by Ethan Nguyen | RBI Tech | Medium
July 14, 2020 - This article will give some breakdown of the basic setup and naming convention for theming your app with styled-components, and how to setup Typescript with styled-components themes
🌐
Newline
newline.co › @kchan › annotating-react-styled-components-with-typescript--e8076d1d
Annotating React Styled Components with TypeScript | newline
November 24, 2021 - Styled components redefine how we apply CSS styles to React components. Unlike the traditional approach of manually assigning CSS classes (from an imported CSS file) to elements within a component, CSS-in-JS libraries like styled-components provide primitives for locally scoping CSS styles to a component with unique, auto-generated CSS classes.
Top answer
1 of 3
12
import React from "react";
import styled from "styled-components";

interface Props {
  name: string;
  className?: string;
}

const NonStyledIcon: React.SFC<Props> = ({ name, className, ...props }) => (
  <i className={`material-icons ${className}`} {...props}>
    {name}
  </i>
);

const Icon = styled(NonStyledIcon)`
  font-size: ${props => props.theme.sizeLarger};
`;

export default Icon;

As per the styled-components TypeScript docs: when defining a component you will need to mark className as optional in your Props interface

2 of 3
6

Here's a comprehensive approach using Styled Components v5 with React Native that will work with plain React as well. If you're not using a theme you can skip to the StyledProps section at the bottom.

  • Define your theme type.

    // MyTheme.ts
    
    export type MyTheme = {
      colors: {
        primary: string;
        background: string;
      };
    };
    
  • Use the type on your themes.

    // themes.ts
    
    export const LightTheme: MyTheme = {
      colors: {
        primary: 'white',
        background: 'white',
      },
    };
    
    export const DarkTheme: MyTheme = {
      colors: {
        primary: 'grey',
        background: 'black',
      },
    };
    
  • Use declaration merging to "merge" the MyTheme type into Styled Components default theme.

    // styled.d.ts
    
    import 'styled-components';
    import { MyTheme } from '../src/themes/MyTheme';
    
    declare module 'styled-components' {
      // eslint-disable-next-line @typescript-eslint/no-empty-interface
      export interface DefaultTheme extends MyTheme {}
    }
    

OK, cool. The theme prop is correctly typed.
What about the components themselves?

  • Wrap your specific component props in the StyledProps type.

    import { StyledProps } from 'styled-components';
    import styled from 'styled-components/native';
    
    type MyViewProps = StyledProps<{
      backgroundColor?: string;
      isAlert?: boolean;
    }>;
    
    const MyView = styled.View(
      (props: MyViewProps) => `
        background-color: ${props.backgroundColor || props.theme.colors.background};
        color: ${props.isAlert ? red : props.theme.colors.primary}
      `,
    );
    

In this example both props.backgroundColor and props.theme.colors.background will auto-complete. When you update MyTheme type or the specific component type it should just work.

🌐
DevGenius
blog.devgenius.io › using-styled-components-and-props-with-typescript-react-a3c32a496f47
Using styled-components and Props With Typescript React | by Ndukwe Armstrong | Dev Genius
April 23, 2021 - Now, you simply pass this interface to the styled button, this helps typescript to check the types of pros to be received for the component
🌐
SaltyCrane
saltycrane.com › cheat-sheets › typescript › styled-components › latest
TypeScript styled-components cheat sheet - SaltyCrane
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. This is a list of TypeScript types for styled-components generated from the declaration files in https://github.com/DefinitelyTyped/DefinitelyTyped/tree/db7577c.
🌐
GitHub
github.com › styled-components › styled-components › issues › 630
How do I provide props to styled elements in Typescript? · Issue #630 · styled-components/styled-components
March 30, 2017 - 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 ...
Author   tal
🌐
GitHub
github.com › styled-components › styled-components › blob › main › packages › styled-components › src › types.ts
styled-components/packages/styled-components/src/types.ts at main · styled-components/styled-components
* on the types of anything that uses styled-components indirectly, even if they do not use the · * babel plugin. * * To enable support for the `css` prop in TypeScript, create a `styled-components.d.ts` file in · * your project source with the following contents: * * ```ts ·
Author   styled-components
🌐
Sunscrapers
sunscrapers.com › blog › styled-components-conditional-styles-with-typescript
Styled Components: Conditional Styles with TypeScript | Sunscrapers
July 27, 2022 - If you do not know how to start or would like to read more, here is the guide on how to write conditional styles inside styled components.
🌐
GitHub
github.com › patrick91 › Styled-Components-Typescript-Example
GitHub - patrick91/Styled-Components-Typescript-Example: Sample "app" using typescript and styled components.
January 26, 2020 - This is a simple example of using styled components with Typescript.
Starred by 104 users
Forked by 27 users
Languages   TypeScript 92.4% | HTML 7.6% | TypeScript 92.4% | HTML 7.6%