Next.js中使用MUI TextField Select点击报错求助

问题描述 #

基于Next.js与MUI框架开发，使用TextField的select选项时，点击组件持续报错。相同代码在其他环境可正常运行，不确定是否为配置问题；项目同时引入了styled-system，怀疑二者存在冲突，不知从何入手修复。

相关代码 #

组件代码 #

import { TextField } from "@mui/material";
import MenuItem from "@mui/material/MenuItem";
import * as React from "react";
import StyledBox from "../StyledSystem/StyledBox";
import StyledSpan from "../StyledSystem/StyledSpan";
import ErrorText from "../common/ErrorText";

interface IBasicProps {}

const Basic: React.FunctionComponent<IBasicProps> = (props) => {
  return (
    <StyledBox py={30} px={40}>
      <StyledBox display='flex' flexDirection='column' fontSize={18}>
        <StyledSpan mb='2px'>
          <StyledSpan>채용 공고명</StyledSpan>
          <StyledSpan ml='3px' fontSize={13} lineHeight={1.46}>
            (50자 이내)
          </StyledSpan>
          <StyledSpan ml='3px' color='rgb(229, 0, 0)'>
        *
          </StyledSpan>
        </StyledSpan>
        <TextField placeholder='예) 000헤어 디자이너, 000네일 디자이너' />
        <ErrorText content='ERROR ERROR ERROR ERROR' />
      </StyledBox>
      <StyledBox
        display='flex'
        flexDirection='column'
        fontSize={18}
        width='100%'
      >
        <StyledSpan mb='2px'>
          <StyledSpan>직군</StyledSpan>
          <StyledSpan ml='3px' color='rgb(229, 0, 0)'>
            *
          </StyledSpan>
        </StyledSpan>
        <StyledBox width='50%'>
          <TextField
            placeholder='예) 000헤어 디자이너, 000네일 디자이너'
            fullWidth
            select
            label='직군'
          >
            <MenuItem></MenuItem>
            <MenuItem></MenuItem>
            <MenuItem></MenuItem>
            <MenuItem></MenuItem>
          </TextField>

          <ErrorText content='ERROR ERROR ERROR ERROR' />
        </StyledBox>
      </StyledBox>
    </StyledBox>
  );
};

export default Basic;

Theme配置代码 #

import { createTheme } from "@mui/material/styles";
import { red } from "@mui/material/colors";

// Create a theme instance.
const theme = createTheme({
  components: {
    // Name of the component
    MuiButtonBase: {
      defaultProps: {
        // The props to change the default for.
        disableRipple: true, // No more ripple, on the whole application 💣!
      },
    },
  },
  palette: {
    primary: {
      main: "#556cd6",
    },
    secondary: {
      main: "#19857b",
    },
    error: {
      main: red.A400,
    },
  },
});

export default theme;

错误截图 #

修复方案 #

1. 补全MenuItem必填属性 #

MUI的Select组件要求每个MenuItem必须设置唯一的value属性，且需要包含显示内容，否则会触发内部逻辑错误。修改示例：

<MenuItem value="hair-designer">헤어 디자이너</MenuItem>
<MenuItem value="nail-designer">네일 디자이너</MenuItem>
<MenuItem value="makeup">메이크업 아티스트</MenuItem>

2. 绑定组件状态 #

TextField的select模式需要绑定value和onChange事件，未受控状态可能引发运行时错误，补充状态逻辑：

const Basic: React.FunctionComponent<IBasicProps> = (props) => {
  const [jobType, setJobType] = React.useState('');
  
  return (
    // ... 其他代码
    <TextField
      placeholder='예) 000헤어 디자이너, 000네일 디자이너'
      fullWidth
      select
      label='직군'
      value={jobType}
      onChange={(e) => setJobType(e.target.value)}
    >
      <MenuItem value="hair-designer">헤어 디자이너</MenuItem>
      {/* ... 其他MenuItem */}
    </TextField>
    // ... 其他代码
  )
}

3. 排查Styled-System冲突 #

• 临时将自定义StyledBox替换为MUI原生Box组件测试，如果报错消失，说明自定义Styled组件修改了底层DOM结构或事件绑定，需要检查Styled-System的样式配置。
• 确认styled-system未覆盖MUI Select弹出层的定位、z-index等核心样式，避免菜单渲染异常。

4. 检查依赖版本兼容性 #

执行以下命令查看依赖版本，确认Next.js、MUI、styled-system版本匹配（MUI v5要求React 17+、Next.js 12+）：

npm list @mui/material next styled-system

若版本不兼容，升级或降级至官方文档推荐的兼容版本。

5. 临时禁用主题特殊配置 #

注释掉theme中MuiButtonBase的disableRipple配置，测试是否为主题配置间接导致的错误：

// components: {
//   MuiButtonBase: {
//     defaultProps: {
//       disableRipple: true,
//     },
//   },
// },

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