Material UI v4导入Autocomplete提示未从@material-ui/core导出问题

错误原因 #

1. Material UI v4 版本中，Autocomplete 组件并未内置在 @material-ui/core 包内，而是归属于实验室组件包 @material-ui/lab
2. 你的导入代码存在拼写错误：你写的Autcomplete缺少1个字母o，正确拼写为Autocomplete
3. 你参考的示例代码是MUI v5版本的写法，其中用到的sx属性是v5新增特性，v4版本不支持该属性。

解决步骤 #

• 第一步：安装和你当前@material-ui/core版本匹配的v4版@material-ui/lab包，避免版本兼容问题：

# npm安装
npm install @material-ui/lab@4.x
# yarn安装
yarn add @material-ui/lab@4.x

• 第二步：修正导入代码，调整Autocomplete的导入路径：

import {
  Grid,
  Card,
  makeStyles,
  CardHeader,
  CardContent,
  TextField, 
} from "@material-ui/core";
// 从lab包引入Autocomplete
import Autocomplete from '@material-ui/lab/Autocomplete';

• 第三步：适配v4版本的组件写法，替换不兼容的sx属性，改用v4支持的样式方案：

// 先通过makeStyles定义组件宽度
const useStyles = makeStyles({
  autoCompleteWrapper: {
    width: 300
  }
});

// 组件内使用示例
function MyComponent() {
  const classes = useStyles();
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={top100Films}
      className={classes.autoCompleteWrapper}
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />
  )
}

内容的提问来源于stack exchange，提问作者JS3