Material UI v5使用makeStyles报Cannot read property 'up' of undefined如何解决

问题原因 #

你当前使用的是Material UI v5 Beta版本，该版本已将makeStyles从@material-ui/core/styles中移除，同时独立的@material-ui/styles包默认不会自动注入主题实例，才会触发你遇到的两类报错。

解决方案 #

方案1：继续使用makeStyles

1. 统一从@material-ui/styles导入makeStyles和createStyles，放弃从@material-ui/core/styles导入的写法，解决导出不存在的报错。
2. 在组件内调用useStyles时，将你已经通过useTheme()拿到的主题实例传入即可解决theme为undefined的问题：

// 导入修改为
import { makeStyles, createStyles } from '@material-ui/styles';

// 组件内调用useStyles时传参
const theme = useTheme();
const classes = useStyles(theme);

方案2：使用MUI v5官方推荐的样式方案（更适配当前版本，无需额外依赖makeStyles）

你需要实现的响应式边距样式完全可以用v5原生支持的写法替代，代码更简洁：

1. 用Box组件的sx属性直接写样式，sx原生支持断点语法，可以完全替代你当前写的root类样式：

// 替换原来的<div className={classes.root}></div>
<Box sx={{
  marginLeft: "none",
  [theme.breakpoints.up('md')]: {
    marginLeft: '3vw'
  }
}} />

也可以用更简化的断点对象写法：

<Box sx={{ marginLeft: { xs: "none", md: "3vw" } }} />

2. 如果样式需要复用，可以用v5自带的styled API：

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

const StyledRoot = styled('div')(({ theme }) => ({
  marginLeft: "none",
  [theme.breakpoints.up('md')]: {
    marginLeft: '3vw'
  }
}));

// 组件内直接使用
<StyledRoot />

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