CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
MarksCode
MarksCode

Reputation: 8584

Material-UI v5 not working styled-components and typescript?

I'm trying to use the mui-v5 with styled-components and typescript. However, even after I added the line to my tsconfig:

"paths": {
  "@mui/styled-engine": [ "./node_modules/@mui/styled-engine-sc" ]
}

I'm getting an error:

Could not find dependency: '@emotion/styled' relative to '/node_modules/@mui/styled-engine/index.js'

when doing: import { ThemeProvider } from "@mui/material/styles";

I made a Code Sandbox to show my setup.

Does anyone know what I'm doing wrong?

Upvotes: 13

Views: 32982

Answers (2)

Kaelyn Suh
Kaelyn Suh

Reputation: 312

You don't need to add @emotion/styled. The mui installation says you can use emotion OR styled-components

I know the instructions are a bit confusing but I just copy/pasted the package.json portion in mui.com/guides/styled-engine/ and it worked for me

package.json:

{
  "dependencies": {
    "@mui/material": "^5.0.0",
    "styled-components": "^5.3.1",
  },
  "devDependencies": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
    "@types/styled-components": "^5.1.14",
  },
  "resolutions": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
  }
}

Upvotes: 11

thug_
thug_

Reputation: 1103

You need to add @emotion/styled and @emotion/react to dependencies

Upvotes: 26

Related Questions