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

Question

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?

Do you mind showing the content of your package.json? I have "@mui/styled-engine-sc in my deps and everything is working fine. — Edwin Vargas
– Edwin Vargas, Commented Mar 23, 2022 at 21:42

thug_ · Accepted Answer · 2021-09-17 12:32:01Z

26

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

answered Sep 17, 2021 at 12:32

thug_

1,1132 gold badges14 silver badges32 bronze badges

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

6 Comments

MarksCode Over a year ago

But I thought the whole point of using styled-components was that I don't need emotion

thug_ Over a year ago

Yeah I checked this mui.com/guides/styled-engine it says that @emotion/react, @emotion/styled, and styled-components are optional peer dependencies of @mui/material, so you need to install them yourself.

MarksCode Over a year ago

Those instructions are really confusing. If it's optional doesn't that mean you don't need them?

thug_ Over a year ago

Check if this codesandbox is what you are looking for codesandbox.io/s/styled-components-forked-4f88k?file=/src/…

a.anev Over a year ago

finally. I've read multi para solutions that didn't fix it. this did, thank you

|

Kaelyn Suh · Accepted Answer · 2021-09-21 17:44:24Z

11

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"
  }
}

answered Sep 21, 2021 at 17:44

Kaelyn Suh

3421 gold badge3 silver badges10 bronze badges

2 Comments

MarksCode Over a year ago

The problem is that this only works with yarn, since "resolutions" is a yarn thing

Tim Over a year ago

Thank you! How does one figure this out?

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related