React Material UI AppBar报TypeError: Cannot read properties of undefined (reading '100')

错误原因 #

你使用ThemeProvider组件时没有传入必填的theme属性，导致MUI组件读取主题配置时，无法获取到调色板相关字段，才触发了读取grey[100]失败的报错。 #

解决方法 #

有两种方案可选：

方案1：补全ThemeProvider的theme配置 #

1. 从@mui/material/styles中导入createTheme方法
2. 创建默认主题实例，传入ThemeProvider的theme属性即可
   修改后的完整代码如下：

import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

// 创建默认主题，也可以传入自定义配置修改主题
const defaultTheme = createTheme();

function FormUserDetails({ nextstep, values }) {

    const proceed = (e) => {
        e.preventDefault();
        nextstep();
    }
    return (
        <ThemeProvider theme={defaultTheme}>
            <React.Fragment>
                <AppBar position="static">
                    <Toolbar>
                        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                            News
                        </Typography>
                    </Toolbar>
                </AppBar>
            </React.Fragment>
        </ThemeProvider>
    )
}

export default FormUserDetails

方案2：直接移除当前组件的ThemeProvider #

如果你的项目根组件已经全局包裹了ThemeProvider，当前组件完全不需要重复嵌套，直接删掉外层的ThemeProvider标签即可，代码如下：

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

function FormUserDetails({ nextstep, values }) {

    const proceed = (e) => {
        e.preventDefault();
        nextstep();
    }
    return (
        <React.Fragment>
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                        News
                    </Typography>
                </Toolbar>
            </AppBar>
        </React.Fragment>
    )
}

export default FormUserDetails

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