Styled-components-website: TS examples need an update after 4.1

[JeroenReumkens]

Hi There!

It looks like the Typescript typings are broken since the upgrade to 4.1. There is an issue over at the @types repo, but I just wanted to make an issue here as well because I have the feeling that it otherwise would be overlooked.

Please feel free to close this issue if you don't think there should be an issue here.

The issue I'm referring to is:
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30536

Thanks a lot for all the effort!!

[Jessidhia]

They are not broken, and that issue has already been fixed on master. However, the documentation on styled-components is now outdated.

In particular, the types now prefer dealing with component types directly instead of their props for purposes of ensuring the refs are correct.

[jimjeffers]

@Kovensky can you share an updated example of how we should specify props moving forward?

[ralexand56]

Is there any way to use the css prop with typescript now?

[Ky6uk]

So how to use theming with latest updates?

[Ky6uk]

Alright I found some kind of the solution here. We can just use declaration merging and @types/styled-components v4.1.4 and up.

1. Create declaration file (I name it styled.d.ts)

// import original module declaration
import 'styled-components';

// and extend it
declare module 'styled-components' {
  export interface DefaultTheme {
    borderRadius: string;

    colors: {
      main: string;
      secondary: string;
    };
  }
}

1. Create a theme

import { DefaultTheme } from 'styled-components';

const theme : DefaultTheme = {
  borderRadius: '5px',

  colors: {
    main: 'cyan',
    secondary: 'magenta'
  }
};

export default theme;

1. Just use original module as is

import styled from 'styled-components';

export const Component = styled.div`
  color: ${props => props.theme.colors.main};
`;

// `createGlobalStyle` and `css` also works fine

[Ky6uk]

@probablyup can we update documentation about it in case this is the right solution? I'm not good in writing docs.

[Voronar]

@Ky6uk thanks.
I a little bit modified your code and got this solution:

import * as styledComponents from 'styled-components';
import { ThemeType } from 'my/ui/theme';

declare module 'styled-components' {
  interface DefaultTheme extends ThemeType {}
}

const {
  default: styled,
  css,
  createGlobalStyle,
  keyframes,
  ThemeProvider,
} = styledComponents as styledComponents.ThemedStyledComponentsModule<ThemeType>;

type ThemedStyledProps<P> = styledComponents.ThemedStyledProps<P, ThemeType>;

export { css, createGlobalStyle, keyframes, ThemeProvider, ThemedStyledProps };
export default styled;

[Ky6uk]

@Voronar latest typings allow us to not use re-export at all. So this is much more convenient way to import just original module along the codebase.

[rovansteen]

@Ky6uk thanks for that solution, had been struggling with this for hours but that's a really elegant way to solve it. 👍

[therealparmesh]

@Ky6uk Thank you! This worked like a charm.

[bwillem]

I can't seem to get vscode to autocomplete / intellisense my theme properties - anyone able to? (I'm using the above mentioned declaration merging to make s-c aware of my theme interface)

[cloutiertyler]

@Ky6uk I'm not able to get your solution to work with createGlobalStyles. I'm getting

error TS2339: Property 'colors' does not exist on type 'DefaultTheme'

only when using the theme inside of createGlobalStyles.

[Ky6uk]

@cloutiertyler can you provide a code example?

[cloutiertyler]

@Ky6uk The issue was that I was using ts-node which apparently was unable to pick up the types (but oddly only in some contexts). I switched to tsc and had no issues.

[fabb]

I modified @Ky6uk's solution and DRYed it by using typeof:

import 'styled-components';
import { MyTheme } from 'theme'

declare module 'styled-components' {
  export interface DefaultTheme extends MyTheme {}
}

const theme = {
  borderRadius: '5px',

  colors: {
    main: 'cyan',
    secondary: 'magenta'
  }
};

export type MyTheme = typeof theme

[SethGunnells]

I'm finding that, using the suggested declaration merging method, props are being reported as type anywithin my styled components. Any clues as to why this might be? (My apologies if this is not the appropriate place to discuss.)

I've included a very simply example.

Tried rolling back to 4.0.3 with the method of exporting a ThemedStyledComponentsModule and the props are typed correctly.

[realfresh]

I'm finding I can use styled components 4.2.0 and typescript 3.3.4000 without issues when exporting ThemedStyledComponentsModule.

It doesn't seem to work following the documentation and exporting DefaultTheme. By doesn't work, props is behaving as any with no typing.

[djasuncion]

@Ky6uk I'm not able to get your solution to work with createGlobalStyles. I'm getting

error TS2339: Property 'colors' does not exist on type 'DefaultTheme'

only when using the theme inside of createGlobalStyles.

Had there been a solution to this? I'm getting the same problem. --trying to learn TypeScript with CRA

[bduffany]

Can this issue be reopened?

[bduffany]

I'm able to get this working using createGlobalStyle<{theme: ThemeType}> ... but this seems cumbersome, and it also breaks syntax highlighting in VS Code (with local TypeScript version), compared to createGlobalStyle without the angle brackets. Using styled-components and types version ^5.01

[gastonmorixe]

Solved it by upgrading

"fork-ts-checker-webpack-plugin": "^4.1.4",

and forcing it

"resolutions": {
    "fork-ts-checker-webpack-plugin": "^4.1.4"
  }

[LauraBeatris]

I modified @Ky6uk's solution and DRYed it by using typeof:

import 'styled-components';
import { MyTheme } from 'theme'

declare module 'styled-components' {
  export interface DefaultTheme extends MyTheme {}
}

const theme = {
  borderRadius: '5px',

  colors: {
    main: 'cyan',
    secondary: 'magenta'
  }
};

export type MyTheme = typeof theme

Thanks!! That helped me a lot

[ivoneijr]

None of the solutions worked well for me.

For internal components, it works fine, but I'm still trying to use custom theme inside GlobalStytles without success.

C:/projects/iws/tchan/prototype/my-app/src/styles/GlobalStyles.ts
TypeScript error in C:/projects/iws/tchan/prototype/my-app/src/styles/GlobalStyles.ts(21,48):
Property 'colors' does not exist on type 'DefaultTheme'.  TS2339

    19 |   html, body, #root {
    20 |     height: 100%;
  > 21 |     background-color: ${(props) => props.theme.colors.background.page};
       |                                                ^
    22 |   }
    23 | `;
    24 | 

:/

[t-nunes]

None of the solutions worked well for me.

For internal components, it works fine, but I'm still trying to use custom theme inside GlobalStytles without success.

C:/projects/iws/tchan/prototype/my-app/src/styles/GlobalStyles.ts
TypeScript error in C:/projects/iws/tchan/prototype/my-app/src/styles/GlobalStyles.ts(21,48):
Property 'colors' does not exist on type 'DefaultTheme'.  TS2339

    19 |   html, body, #root {
    20 |     height: 100%;
  > 21 |     background-color: ${(props) => props.theme.colors.background.page};
       |                                                ^
    22 |   }
    23 | `;
    24 | 

:/

just add the tsconfig.json in root folder

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ],
  "files": [
    "src/styles/styled.d.ts"
  ]
}

[Jay-flow]

I modified @Ky6uk's solution and DRYed it by using typeof:

import 'styled-components';
import { MyTheme } from 'theme'

declare module 'styled-components' {
  export interface DefaultTheme extends MyTheme {}
}

const theme = {
  borderRadius: '5px',

  colors: {
    main: 'cyan',
    secondary: 'magenta'
  }
};

export type MyTheme = typeof theme

Thx! It is work for me 👍🏼