在create-react-app中MUI(material-ui)使用styled-component 作为样式引擎

MUI 的新名字 mui 不再是 material-ui 相关的包名也随之更改

https://mui.com/zh/getting-started/installation/#npm
https://mui.com/zh/guides/styled-engine/
官方案例-js
官方案例-ts

需要配置 webpack
create-react-app中需要customize-cra覆盖默认webpack配置

yarn add customize-cra react-app-rewired -D 

"@mui/core": "^5.0.0-alpha.53",
"@mui/material": "^5.0.6",
"@mui/styled-engine-sc": "^5.0.3",
"@types/styled-components": "^5.1.15",
"styled-components": "^5.3.3",

config-overrides.js

const { addWebpackAlias, override } = require('customize-cra');

module.exports = override(
    addWebpackAlias({
        '@mui/styled-engine': '@mui/styled-engine-sc',
    }),
);

tsconfig.json

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