Material UI中Box.js报错createTheme_default不是函数的解决求助

核心原因 #

你在外层已有的<form>标签内部，通过Box component="form"创建了多个嵌套的form元素——而HTML规范明确禁止form标签嵌套，这导致Material UI的Box组件在渲染时触发内部错误，所以报错指向了box.js。

修复步骤 #

1. 移除嵌套的form配置：删除所有Box组件上的component="form"属性，外层已有完整的form标签，无需重复嵌套。
2. 迁移全局表单属性：把noValidate和autoComplete="off"移到外层的<form>标签上，确保表单全局生效这些配置。

修复后的完整代码 #

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import styled from "styled-components";
import Layout from '../../Layouts/SideMenu';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';


const Wrapper = styled.section`
  padding: 4em;
`;


export default function Create() {
    const [age, setAge] = React.useState('');

    return (
        <Layout>
            <Wrapper>
                <form action="" noValidate autoComplete="off">
                    <Stack spacing={3} direction="column">
                        <h2>Form Tambah Siswa</h2>

                        <TextField id="nama" label="Nama" variant="outlined" />
                        
                        <Box sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}>
                            <TextField id="email" label="Email" variant="outlined" />
                        </Box>

                        <Box sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}>
                            <TextField id="password" label="Password" variant="outlined" />
                        </Box>

                        <Box sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}>
                            <TextField id="confirm-password" label="Confirm Password" variant="outlined" />
                        </Box>

                        <Button variant="contained" type='submit'>Submit</Button>
                    </Stack>
                </form>
            </Wrapper>
        </Layout>
    )
}

额外优化提示 #

• 给每个TextField设置唯一的id（原代码中多个TextField共用outlined-basic，会导致DOM元素ID重复，可能引发逻辑异常）。
• 如果不需要单独用Box包裹TextField，可直接将sx样式应用到TextField上，进一步简化组件结构。

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