修改 1. 装新包

// package.json

"dependencies": {
   // before
   - "material-ui/core": "4.12.4",
   // after
   + "@mui/material": "^5.15.1",
   
   // before
   - "@material-ui/icons": "4.11.3",
   // after
   + "@mui/icons-material": "^5.15.1",
   
   // before
   - "@material-ui/lab": "4.0.0-alpha.61",
   - "@material-ui/pickers": "3.3.10", 
   // after
   + "@mui/lab": "^5.0.0-alpha.157",
   
   // after
   + "@mui/system": "^5.15.1",
   + "@emotion/react": "^11.11.3",
   + "@emotion/styled": "^11.11.0",
}

修改 2. 改变引入的语句

示例

//App.js

// Before
- import TextField from "@material-ui/core/TextField";
- import Search from "@material-ui/icons/Search";
- import MuiAlert from "@material-ui/lab/Alert";

// After
+ import TextField from "@mui/material/TextField";
+ import Search from "@mui/icons-material/Search";
+ import MuiAlert from "@mui/lab/Alert";

引用

修改 3. 引用组件的新名字

示例：ExpansionPanel

Mui的v5版本重命名了 ExpansionPanel组件，将其修改为Accordion，所以在升级时，需要将其全部替换。

// App.js

// Before
- import ExpansionPanel from "@material-ui/core/ExpansionPanel";

// After
+ import Accordion from "@mui/material/Accordion";

引用

expansionpanel

修改 4. 用户自定义的CSS升级

旧的使用方式: withStyles 和 makeStyles

// App.js
// Before
import { withStyles, makeStyles } from "@material-ui/core/styles";
import { Table, TableCell, TableHead, TableRow } from "@material-ui/core";

const useStyles = makeStyles({
  table: {
    minWidth: 650,
  },
});

const StyledTableCell = withStyles((theme) => ({
  head: {
    fontWeight: 700,
  },
}))(TableCell);

export const App = () => {
  const classes = useStyles();
  
  return (
    <Table className={classes.table} size="small">
      <TableHead>
        <TableRow>
          <StyledTableCell/>
        </TableRow>
      </TableHead>
   )
}

修改方式 1: 使用sx

为了替换 withStyles 和 makeStyles的使用, 可以使用组件自带的sx属性自定义css

// App.js
// After
import { Table, TableCell, TableHead, TableRow, Box } from "@mui/material";

const StyledTableCell = (props) => (
  <TableCell sx={{ fontWeight: 700 }} {...props} />
);

export const App = () => {
  return (
   <Box>
    <Table sx={{ minWidth: 650 }} size="small">
      <TableHead>
        <TableRow>
          <StyledTableCell/>
        </TableRow>
      </TableHead>
   </Box>
   )
}

修改方式 2: 使用ThemeProvider(@mui/system)自定义CSS

包 @mui/styles已经不推荐使用了, 现在官方推荐使用 @mui/system 包替代

// App.js
import * as React from 'react';
import { Box, ThemeProvider, createTheme } from '@mui/system';

const theme = createTheme({
  palette: {
    text: {
      primary: '#173A5E',
      secondary: '#46505A',
    }，
  },
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box
        sx={{
          bgcolor: 'background.paper',
          boxShadow: 1,
          borderRadius: 2,
          p: 2,
          minWidth: 300,
        }}
      >  
      </Box>
    </ThemeProvider>
  );
}

引用

修改 5. 升级Datepick

示例：升级 `MuiPickersUtilsProvider` 到 `LocalizationProvider`

// App.js
// Before
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

const App = () => {
    return (
      <MuiPickersUtilsProvider>
        <DatePicker />
      </MuiPickersUtilsProvider>
   );
}

// App.js
// After
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";

const App = () => {
    return (
      <LocalizationProvider>
        <DatePicker />
      </LocalizationProvider>
   );
}

引用

修改 6. 升级一些组件的属性

示例： TextField

mui v5 新增了variant属性，如：

// App.js
// After

<TextField variant="standard"  .../>

升级 material ui: 从 v4 到 v5