Typescript error using styled-components

Question

Having the following:

tsconfig

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "module": "commonjs",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "declaration": true,
    "outDir": "lib",
    "lib": ["es2015","dom"]
    }
}

Note declaration : true

And .tsx file:

import * as styledComponents from "styled-components";

export const backColor = (props: MyProps) => props.theme.backColor;

export const Title = styledComponents.div`  
   text-align: center;
   background-color:${backColor};
   width: 100%;
`;

When I run tsc on the terminal to compile I get:

error TS2339: Property 'div' does not exist on type 'typeof "/root/node_modules/styled-comp...'.

UPDATE

The error happens with both ways of importing styled-components

import styled from 'styled-components'
import * as styled from 'styled-components'

Answer 1

declaration in tsconfig is only telling it to generate type defs for your own files in the build output, not specifying how to import them from others

As they are not exporting a namespace in their type defs, but the interface itself, your import just needs to be changed to:

import styledComponents from "styled-components";

EDIT

On further investigation, the above works with declarations turned off or when not exporting the component

However it fails when declarations is true AND exporting the component, as it tries to generate your own type defs using their external interface StyledComponentClass that is not in scope. [ts] Exported variable 'Title' has or is using name 'StyledComponentClass' from external module "/blah/blah/node_modules/styled-components/typings/styled-components" but cannot be named.

To fix it you must also explicitly import the class type definition along with the default:

import styledComponents, { StyledComponentClass } from 'styled-components';

export const backColor = (props: MyProps) => props.theme.backColor;

export const Title = styledComponents.div`  
   text-align: center;
   background-color:${backColor};
   width: 100%;
`;

Answer 2

By importing it with require I got to avoid the error:

const styledComponents = require('styled-components');

Answer 3

For me it was corrupted type files in node_modules. Fixed with

rm -rf node_modules
npm install

Answer 4

The easiest way without importing anything besides styled from "styled-components" is this:

    const StyledComponent = styled.div`
        background: black;
        color: white;
    `;

    const StyledComponentWithParams = styled.div<{ color?: string }>`
        background: yellow;
        color: ${(color) => (color ? "yellow" : "white")};
    `;

    const StyledComponentDefaultValueParams = styled.div<{ color?: string }>`
        background: yellow;
        color: ${(color = "white") => (color)};
    `;

The StyledComponent contains no parameters.

The StyledComponentWithParams and StyledComponentDefaultValueParams both contain a parameter but the latter sets the parameter, color's default value in the arrow function's parameter list.

Answer 5

I experienced this error when I used VSCode to rename a div to Div (which was what I named my styled component).

I suspected my rename might have taken effect in some styled-components / React core files and the changes wouldn't show on git tracking since those are git ignored files. Hence, easily missed.

The solution for me was to delete node_modules/ and do npm install again.

Answer 6

Bit late, But installing styled-components' types worked for me.

npm i @types/styled-components