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

您不能使用@mui/material 中的makeStyles（如果这样做，您会收到错误消息），因为它已被移动到@mui/styles，因为makeStyles 被标记为已弃用。这就是为什么类型是never；它不在那里！这个函数是空的，它的only purpose是告诉你makeStyles现在在哪里。

@mui/styles 是旧版软件包，不建议在 v5 中使用。请参阅this 回答以了解更多关于它们两者之间的差异。对于替代方案，您可以使用styled/sx prop。