search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.52k stars 31.89k forks source link

Styled components as styled engine in CRA app with craco and react scripts 5 #33222

Open PrimulaX opened 2 years ago

PrimulaX commented 2 years ago

Duplicates

Latest version

Current behavior 😯

I'm using styled-components as styled engine which needs alias and craco is used to override webpack configs which only supports react-script 4* (plus craco-alias plugin is already deprecated), meanwhile I need to update react-scripts, can I use styled-components as styled engine without craco?

Expected behavior 🤔

So I need to use styled-components as styled engine without craco because craco doesn't support react-scripts 5. Sorry for create this issue as bug report.

Steps to reproduce 🕹

No response

Context 🔦

No response

Your environment 🌎

No response

PrimulaX commented 2 years ago

I was able to override style-engine with npm override that way: 

"overrides": {
    "@mui/styled-engine": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-5.6.1.tgz" 
  },

But I was unable to reference it to the existing style-engine-sc pgk.

mnajdova commented 2 years ago

Seeing https://github.com/dilanx/craco/issues/378#issuecomment-1108663751 I am not very hopeful for using craco too. In addition, https://github.com/arackaf/customize-cra is abandoned too (last version from 2 years ago).

Maybe we can try to use something like rewire, here is an example of it: https://marmelab.com/blog/2021/07/22/cra-webpack-no-eject.html#rewire-in-practice, but I haven't personally tried it so I cannot guarantee that it will work.

If someone from the community would like to help and investigate this further it would be great 👌