TypeScript React项目使用Material UI的useStyles出现无效Hook调用错误

你对useStyles的调用位置判断错误：该Hook实际调用位置是异步函数init的内部，此时React并未处于函数组件的渲染执行流程中，完全没有进入Root组件的函数体，违反了React Hook必须在函数组件顶层、React渲染流程内调用的规则，因此抛出无效Hook调用错误。

• 方案1（最便捷）：将useStyles调用移到Root函数组件的顶层即可，修改后代码如下：

// index.tsx
import React from 'react';
import {render} from 'react-dom';

import {makeStyles} from '@material-ui/styles';

const useStyles = makeStyles({
  qwe: {
    color: 'red',
  },
});

const init = async () => {
  const Root = () => {
    // Hook移到组件内部顶层调用
    const classes = useStyles();
    return <div className={classes.qwe}>asd</div>;
  };

  render(<Root />, document.getElementById('root'));
};

init();

• 方案2：如果你的业务逻辑要求必须在组件外提前处理样式相关逻辑，可以改用Material UI的styled样式方案，或者把init内的异步初始化逻辑移到组件的useEffect钩子内执行，避免在React渲染流程外调用Hook。

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