NextJS中MUI的LinearProgressWithLabel等组件无法访问问题求助

核心问题 #

LinearProgressWithLabel 和 CircularProgressWithLabel 并非@mui/material包的内置导出组件，它们是MUI官方文档提供的自定义封装示例组件，源码并未打包进@mui/material或@mui/lab发布包中，因此直接从@mui/material导入会得到undefined。

解决方法 #

直接复制官方示例源码到项目中，作为自定义组件使用，以下是适配你需求的LinearProgressWithLabel示例：

import React from 'react';
import LinearProgress from '@mui/material/LinearProgress';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

const LinearProgressWithLabel = ({ value, color, label, ...props }) => {
  return (
    <Box sx={{ display: 'flex', alignItems: 'center' }}>
      <Box sx={{ width: '100%', mr: 1 }}>
        <LinearProgress 
          variant="determinate" 
          value={value} 
          color={color}
          {...props} 
        />
      </Box>
      <Box sx={{ minWidth: 'auto', px: 1 }}>
        <Typography variant="body2" color="text.secondary">
          {label}
        </Typography>
      </Box>
    </Box>
  );
};

export default LinearProgressWithLabel;

之后在你的组件中导入这个自定义组件即可使用，无需再从@mui/material导入。

补充说明 #

你在MUI GitHub仓库（v5.9.2版本）中看到的相关内容，是文档仓库里的示例代码，并非组件源码仓库的导出内容。即使升级到v5.16.0，这两个组件也不会成为内置组件，因为它们本质是基于基础Progress组件的业务封装示例。

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