React中Material UI ListItem报prepareStyles未定义读取错误

问题描述 #

在React项目中使用Material UI的ListItem组件时，触发错误：Cannot read properties of undefined (reading 'prepareStyles')，已确认rows数据已填充且定义，但错误持续存在。

相关代码：

return isSmallScreen ? (
    <div>
        <List sx={{ width: "100%" }}>
            {rows &&
                rows.map((row) => (
                    <ListItem>
                        <ListItemText primary={row.name}></ListItemText>
                    </ListItem>
                ))}
        </List>
    </div>
) : (
    <DataGrid
        className=""
        getRowId={(row) => row._id}
        rows={rows}
        columns={columns}
        pageSize={30}
        rowsPerPageOptions={[30]}
        disableSelectionOnClick
        experimentalFeatures={{ newEditingApi: true }}
        autoHeight={true}
        autoPageSize={true}
        selectionModel={selectedRows}
        onSelectionModelChange={(ids) => {
            setSelectedRows(ids);
        }}
    />
);

解决步骤 #

1. 统一Material UI版本 #

这个错误大概率是v4和v5版本混用导致的：

• 检查package.json，如果同时存在@material-ui/core（v4）和@mui/material（v5），删除其中一套，统一使用同一版本。
• 若使用v5，确保所有组件都从@mui/material导入：

  import List from '@mui/material/List';
  import ListItem from '@mui/material/ListItem';
  import ListItemText from '@mui/material/ListItemText';
  

• 删除package-lock.json/yarn.lock，重新执行npm install或yarn install，清理依赖冲突。

2. 确认ThemeProvider配置正确 #

• v5的ThemeProvider来自@mui/material/styles，v4来自@material-ui/core/styles，不能混用。确保根组件被正确版本的ThemeProvider包裹：

  // v5示例
  import { ThemeProvider, createTheme } from '@mui/material/styles';
  const theme = createTheme();
  
  function App() {
    return (
      <ThemeProvider theme={theme}>
        {/* 你的页面/组件 */}
      </ThemeProvider>
    );
  }
  

3. 为ListItem添加key属性 #

map渲染组件时必须添加唯一key，避免渲染异常：

rows.map((row) => (
  <ListItem key={row._id}>
    <ListItemText primary={row.name}></ListItemText>
  </ListItem>
))

4. 优化数据加载的边界处理 #

用可选链语法替代简单的&&，更严谨处理异步加载场景：

rows?.map((row) => (
  <ListItem key={row._id}>
    <ListItemText primary={row.name}></ListItemText>
  </ListItem>
))

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