React Material UI：Appbar 给出了 TypeError: Cannot read properties of undefined (reading '100')

Posted 2023-02-22

【中文标题】React Material UI：Appbar 给出了 TypeError: Cannot read properties of undefined (reading \'100\')

【英文标题】：React Material UI: Appbar gave TypeError: Cannot read properties of undefined (reading '100')React Material UI：Appbar 给出了 TypeError: Cannot read properties of undefined (reading '100')

【发布时间】：2021-12-05 05:59:05

【问题描述】：

我正在制作一个使用 Material UI 组件的多步骤表单。但是在我导入它的那一刻，它显示错误。 代码是：

import React from 'react';
import  ThemeProvider  from '@mui/material/styles';
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 (
        <ThemeProvider>
            <React.Fragment>
                <AppBar position="static">
                    <Toolbar>
                        <Typography variant="h6" component="div" sx= flexGrow: 1 >
                            News
                        </Typography>
                    </Toolbar>
                </AppBar>
            </React.Fragment>
        </ThemeProvider>
    )


export default FormUserDetails

现在错误如下所示： `

TypeError：无法读取未定义的属性（读取“100”） （匿名函数）C:/Users/edkni/Documents/projects/multi-step form/state_form/node_modules/@mui/material/AppBar/AppBar.js:40 37 |主题, 38 |所有者状态 39 | ) => 40 | const backgroundColorDefault = theme.palette.mode === 'light' ?主题.调色板.灰色[100]：主题.调色板.灰色[900]； 41 |返回_扩展（ 42 |显示：'弹性'， 43 | flexDirection: 'column',查看编译后的transformStyleArg C:/Users/edkni/Documents/projects/multi-step form/state_form/node_modules/@mui/system/esm/createStyled.js:175 172 | = _ref2, 173 |其他 = _objectWithoutPropertiesLoose(_ref2, _excluded3); 174 | 175 |返回 styleArg(_extends( 176 |主题：isEmpty（主题输入）？默认主题：主题输入 177 | ， 其他））; 178 | ;

我不知道那是什么意思。如果有人可以回答，那将是很大的帮助。提前谢谢你。

【参考方案1】：

基于MUI 文档：

如果你想自定义主题，你需要使用 ThemeProvider 组件，以便将主题注入您的应用程序。

所以ThemeProvider 组件中的theme 属性是必需的。你应该给它注入一个theme：

import React from "react";
import  createTheme, ThemeProvider  from "@mui/material/styles";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import  orange  from "@mui/material/colors";

function FormUserDetails( nextstep, values ) 
  // const proceed = (e) => 
  //   e.preventDefault();
  //   nextstep();
  // ;

  const theme = createTheme(
    palette: 
      primary: 
        main: orange[500]
      
    
  );

  return (
    <ThemeProvider theme=theme>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" component="div" sx= flexGrow: 1 >
            News
          </Typography>
        </Toolbar>
      </AppBar>
    </ThemeProvider>
  );


export default function App() 
  return <FormUserDetails />;

【讨论】：

谢谢你，这真的有效。从这种偏好来看，我认为也发生了很多变化。你认为我应该从哪里开始掌握所有的变化？

@SunilShah 随时！试试看这个链接：***.com/questions/69219552/…