MUI是否已移除LoadingButton组件？导入该组件提示模块不存在如何解决

原因说明 #

LoadingButton并未从MUI中移除，自MUI v5.10.0版本起，该组件从实验性的@mui/lab包正式迁入核心组件库@mui/material，原@mui/lab下的LoadingButton入口已废弃，因此会触发模块未找到的报错。

解决方案 #

根据你使用的MUI版本选择对应操作即可：

• 若使用MUI v5.10.0及以上版本
  1. 确认已安装核心依赖，未安装可执行命令：

  npm install @mui/material @emotion/react @emotion/styled
  

  2. 替换导入语句为以下任意一种即可：

  // 路径导入（打包体积更小）
  import LoadingButton from '@mui/material/LoadingButton';
  // 命名导入
  import { LoadingButton } from '@mui/material';
  

• 若使用MUI版本低于v5.10.0
  1. 先安装@mui/lab依赖：

  npm install @mui/lab
  

  2. 继续使用原有导入语句即可正常引入组件：

  import LoadingButton from '@mui/lab/LoadingButton';
  

基础使用示例 #

import { useState } from 'react';
import LoadingButton from '@mui/material/LoadingButton';

function SubmitBtn() {
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    setLoading(true);
    // 执行请求逻辑，完成后修改loading状态
    setTimeout(() => setLoading(false), 2000);
  };

  return (
    <LoadingButton
      loading={loading}
      variant="contained"
      onClick={handleClick}
    >
      提交表单
    </LoadingButton>
  );
}

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