'Typescript error using styled-components

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'

Solution 1:^[1]

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.

Solution 2:^[2]

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

rm -rf node_modules
npm install

Solution 3:^[3]

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.

Solution 4:^[4]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Andreas Bigger
Solution 2	Jkarttunen
Solution 3	CodenNerd
Solution 4	Franklin

'Typescript error using styled-components

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]