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'

alechill · Accepted Answer · 2017-09-01 09:50:02Z

7

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

edited Sep 1, 2017 at 9:50

answered Aug 31, 2017 at 21:43

alechill

4,56223 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Franklin Over a year ago

Tks for your time. I know the declaration's meaning. But if I put declaration=false the error is avoided. It is only when declaration=true that I get this error. I do need the declarations because I am building a React Component Library...

alechill Over a year ago

Ah yep, have recreated with declarations true and exporting the component - updated answer should fix it

CodenNerd · Accepted Answer · 2022-02-11 16:00:44Z

2

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.

answered Feb 11, 2022 at 16:00

CodenNerd

471 silver badge6 bronze badges

1 Comment

Hanzla Habib Over a year ago

faced same issue, was about to delete my vite project setup and move back to CRA, Thankyou it helped. 🤲

Andreas Bigger · Accepted Answer · 2020-01-27 20:58:19Z

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.

ariv797 · Accepted Answer · 2022-10-24 16:21:17Z

1

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

npm i @types/styled-components

answered Oct 24, 2022 at 16:21

ariv797

518 bronze badges

Comments

Jkarttunen · Accepted Answer · 2021-02-28 17:36:46Z

0

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

rm -rf node_modules
npm install

answered Feb 28, 2021 at 17:36

Jkarttunen

7,7014 gold badges30 silver badges29 bronze badges

Comments

Franklin · Accepted Answer · 2017-08-31 21:43:50Z

-1

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

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

answered Aug 31, 2017 at 21:43

Franklin

9011 gold badge8 silver badges28 bronze badges

2 Comments

alechill Over a year ago

Thats because by using require you lose all type checking from that point, it automatically becomes any

Franklin Over a year ago

Ouch! True... That is the only work around that worked for me so far. tks for the clarification!

Collectives™ on Stack Overflow

Typescript error using styled-components

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related