如何将Material UI Icons v4样式迁移至v5并保持样式一致？

1. 基础依赖导入调整 #

首先替换所有旧版包路径为v5官方路径：

• 核心组件从@material-ui/core改为@mui/material
• 图标从@material-ui/icons改为@mui/icons-material

修改后的Header组件导入部分：

import { AppBar, Toolbar, Typography, InputBase, Box} from '@mui/material'
import SearchIcon from '@mui/icons-material/Search'

2. 样式方案迁移（两种可选） #

方案A：继续使用makeStyles（兼容旧代码）

MUI v5不再默认包含makeStyles，需单独安装依赖：

npm install @mui/styles
# 或
yarn add @mui/styles

修改styles.js的导入路径：

import { alpha, makeStyles } from '@mui/styles';

其余样式代码无需改动，但需确保根组件被ThemeProvider包裹（提供主题上下文）：

// 在App.js或根组件中
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Header />
      {/* 其他组件 */}
    </ThemeProvider>
  );
}

方案B：改用SX Prop（MUI v5推荐）

直接在组件内用sx属性定义样式，无需额外依赖，更符合v5设计理念：

完整修改后的Header组件：

import { AppBar, Toolbar, Typography, InputBase, Box, alpha } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';

const Header = () => {
  return (
    <AppBar position='static'>
      <Toolbar sx={{ display: 'flex', justifyContent: 'space-between' }}>
        <Typography 
          variant='h5' 
          sx={{
            display: 'none',
            [theme => theme.breakpoints.up('sm')]: { display: 'block' }
          }}
        >
          Travel Advisor
        </Typography>
        <Box display='flex' alignItems='center'>
          <Typography 
            variant='h6' 
            sx={{
              display: 'none',
              marginRight: 2,
              [theme => theme.breakpoints.up('sm')]: { display: 'block' }
            }}
          >
            Explore new places
          </Typography>
          <Box 
            sx={{
              position: 'relative',
              borderRadius: theme => theme.shape.borderRadius,
              backgroundColor: theme => alpha(theme.palette.common.white, 0.15),
              '&:hover': { backgroundColor: theme => alpha(theme.palette.common.white, 0.25) },
              marginRight: 2,
              marginLeft: 0,
              width: '100%',
              [theme => theme.breakpoints.up('sm')]: { marginLeft: 3, width: 'auto' }
            }}
          >
            <Box 
              sx={{
                padding: '0 16px',
                height: '100%',
                position: 'absolute',
                pointerEvents: 'none',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}
            >
              <SearchIcon />
            </Box>
            <InputBase 
              placeholder="Search..." 
              sx={{
                color: 'inherit',
                padding: '8px 8px 8px 0',
                paddingLeft: `calc(1em + 32px)`,
                transition: theme => theme.transitions.create('width'),
                width: '100%',
                [theme => theme.breakpoints.up('md')]: { width: '20ch' }
              }}
            />
          </Box>
        </Box>
      </Toolbar>
    </AppBar>
  )
}

export default Header;

内容的提问来源于stack exchange，提问作者Maximo Juan Andrs Mancilla Mir