MUI v5 Typescript makeStyles 从不返回

Question

我正在尝试将我的组件从 MUI v4 迁移到 v5，但我已经不知道如何迁移我的makeStyles组件了。

之前，我有过类似的工作：

const useStyles = makeStyles((theme: Theme) => ({
  paper: {
    padding: theme.spacing(2),
    someMore: 'styles'
  }
}));
// ...

const Component: FC = () => {
  const theme = useTheme();
  const classes = useStyles(theme);

   return (
      <Paper elevation={3} className={classes.paper}>
         <Stuff />
      </Paper>
   )
}

现在我在通话时遇到错误useStyles：

该表达式不可调用。类型“never”没有调用签名.ts(2349)

这种情况下的解决方法是什么？

Answer 1

您不能使用makeStylesfrom @mui/material（如果这样做，您将收到错误），因为它已被移动到@mui/stylesasmakeStyles被标记为已弃用。这就是为什么类型是never; 它不在那里！该函数是空的，其唯一目的是告诉您makeStyles现在所在的位置。

@mui/styles是一个遗留包，不建议在 v5 中使用。请参阅此答案以了解更多关于两者之间的差异。对于替代方案，您可以使用styled/ sxprop。