使用最新版MUI时makeStyles无法使用的问题求助

问题根源 #

MUI v5版本已将makeStyles从@mui/material/styles移除，独立为@mui/styles包，但该包不会随MUI核心库默认安装，直接导入会触发解析错误；同时旧版导入路径失效会导致自定义CSS无法生效。

方案1：安装@mui/styles继续使用makeStyles #

1. 先安装依赖包：

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

2. 修改导入语句：

// 替换原导入路径
import { makeStyles } from '@mui/styles';

3. 原有样式定义和useStyles的使用方式无需改动，自定义CSS即可正常生效。

方案2：迁移到MUI v5推荐的sx属性（轻量便捷） #

MUI v5内置sx属性用于快速编写自定义样式，无需额外安装依赖，更契合新版设计：
修改后的组件代码：

import React from 'react'
import Container from '@mui/material/Container'
import Button from '@mui/material/Button'
import {Grid} from '@mui/material'
import {Typography} from '@mui/material'

const Leaderboard = () => {
  return (
    <Container align='center'>
      <Typography
        variant='h4'
        align='center'
        fontFamily='revert-layer'
        color='black'
        gutterBottom>
        Leaderboard
      </Typography>
      <Grid
        container
        spacing={5} {/* 原代码中'spacing="5m"'为错误写法，需改为数字或合法字符串 */}
        justifyContent='center'>
        <Grid item>
          <Button
            variant='contained'
            sx={{ margin: '1rem' }} {/* 用sx属性替代className绑定样式 */}
            align='center'>
            Register
          </Button>
          <Button
            variant='outlined'
            align='center'>
            Top Gainers
          </Button>
        </Grid>
      </Grid>
    </Container>
  )
}

export default Leaderboard

方案3：使用styled组件（适配复杂样式场景） #

若需编写更复杂的样式逻辑，可使用MUI的styled函数：

import React from 'react'
import Container from '@mui/material/Container'
import Button from '@mui/material/Button'
import {Grid} from '@mui/material'
import {Typography} from '@mui/material'
import { styled } from '@mui/material/styles';

// 创建自定义样式的Button组件
const StyledButton = styled(Button)(({ theme }) => ({
  margin: '1rem',
}));

const Leaderboard = () => {
  return (
    <Container align='center'>
      <Typography
        variant='h4'
        align='center'
        fontFamily='revert-layer'
        color='black'
        gutterBottom>
        Leaderboard
      </Typography>
      <Grid
        container
        spacing={5}
        justifyContent='center'>
        <Grid item>
          <StyledButton
            variant='contained'
            align='center'>
            Register
          </StyledButton>
          <Button
            variant='outlined'
            align='center'>
            Top Gainers
          </Button>
        </Grid>
      </Grid>
    </Container>
  )
}

export default Leaderboard

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