使用Material UI时持续报错：Uncaught TypeError问题求助

问题背景 #

使用makeStyles定义样式时触发以下错误：

makeStyles.js:156 Uncaught TypeError: Cannot read properties of undefined (reading 'refs')

相关样式代码：

const useStyles = makeStyles({
  row: {
    backgroundColor: "#16171a",
    cursor: "pointer",
    "&:hover": {
      backgroundColor: "#131111",
    },
    fontFamily: "Montserrat",
  },
});

排查与解决步骤 #

• 版本适配与路径检查
  Material UI v5 已将makeStyles迁移至@mui/styles包，若仍从旧路径@material-ui/core/styles引入，会导致上下文异常：

  • 先确认安装依赖：执行npm install @mui/styles或yarn add @mui/styles
  • 修正引入路径：import { makeStyles } from '@mui/styles'
  • 若使用v5，需在组件根节点包裹StylesProvider以提供样式上下文：

    import { StylesProvider } from '@mui/styles';
    function App() {
      return (
        <StylesProvider>
          {/* 业务组件层级 */}
        </StylesProvider>
      );
    }
    

• hooks调用位置合规性
  useStyles属于React hook，必须严格遵循hooks规则：

  • 只能在函数组件内部的顶层作用域调用，禁止在类组件、组件外部、条件判断、循环或嵌套函数中使用。
    错误示例：

  const classes = useStyles(); // 组件外部调用，违反规则
  function MyComponent() {
    return <div className={classes.row}></div>
  }
  

  正确示例：

  function MyComponent() {
    const classes = useStyles(); // 组件内部顶层调用
    return <div className={classes.row}></div>
  }
  

• 主题上下文缺失修复
  若项目使用自定义主题，需确保组件树外层有ThemeProvider包裹，makeStyles依赖主题上下文完成样式渲染：

  import { ThemeProvider, createTheme } from '@mui/material/styles';
  const customTheme = createTheme({
    // 自定义主题配置
  });
  
  function App() {
    return (
      <ThemeProvider theme={customTheme}>
        <StylesProvider>
          {/* 业务组件层级 */}
        </StylesProvider>
      </ThemeProvider>
    );
  }
  

• 其他hooks违规排查
  检查组件内其他hooks是否符合调用规则（如禁止在条件语句中调用），违规的hooks使用会导致React上下文混乱，间接引发该错误。

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