Can't see tag suggestions after importing styled-components

26 views Asked by At

My package.json file:

"name": "it-incubator-todolist-ts",
"version": "0.1.0",
"private": true,
"dependencies": {
  "@emotion/react": "^11.11.4",
  "@emotion/styled": "^11.11.0",
  "@mui/icons-material": "^5.15.11",
  "@mui/material": "^5.15.11",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^14.4.3",
  "@types/jest": "^29.2.0",
  "@types/node": "^18.11.0",
  "@types/react": "^18.0.21",
  "@types/react-dom": "^18.0.6",
  "@types/uuid": "^8.3.4",
  "cross-env": "7.0.3",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.22.2",
  "react-scripts": "5.0.1",
  "typescript": "~4.8.4",
  "uuid": "^9.0.0",
  "sass": "^1.69.7",
  "sass-loader": "12.3.0",
  "styled-components": "5.3.6"
},
"scripts": {
  "start": "cross-env BROWSER=none react-scripts start ",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
"eslintConfig": {
  "extends": "react-app"
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
},
"devDependencies": {
  "@types/node": "16.7.13",
  "@types/react": "17.0.20",
  "@types/react-dom": "17.0.9",
  "@types/react-redux": "7.1.22",
  "@types/react-router-dom": "5.3.3",
  "@types/react-test-renderer": "17.0.1",
  "@types/redux-form": "8.3.3",
  "@types/uuid": "8.3.4",
  "@types/styled-components": "5.3.6",
  "babel-plugin-styled-components": "2.0.7"
}

Hi. Normally in previous projects, I've installed the 'styled-components' dependency like so:

import styled from "styled-components";

Then in the .tsx component file I wrote:

const CustomInputStyled = styled

enter image description here

The tags should appear in suggestions, but they don't. Otherwise, if I remove:

import styled from "styled-components";

The tags reappear:

enter image description here

Could someone please explain why this happens? These source files were received from my teacher, so this project was not created with the command:

yarn create react-app my-app --template typescript

Here is the error message:

0

There are 0 answers