Material UI v5中makeStyles的替代方案是什么？如何迁移适配原有样式？

前置说明 #

你是JS项目，不需要添加任何TypeScript相关的类型声明文件，之前加的ts文件可以直接删除，对你的问题没有任何帮助。
你的主题配置本身没有问题，无法识别是因为MUI v5 已经将makeStyles标记为废弃方案，默认不再内置，需要单独安装依赖才能使用，而MUI原生的新样式方案（sx属性/styled API）完全不需要额外配置就能直接读取你定义的全局主题。

方案1：使用sx属性直接改写（最简单，推荐） #

直接在组件上用sx属性写样式，所有样式定义中可以直接读取theme对象的配置，不需要额外定义useStyles：

import { useState, useEffect } from "react";
import { AppBar, Toolbar, Typography, Tabs, Tab } from "@mui/material";
import { Link } from "react-router-dom";
// 直接删除原来的makeStyles相关代码即可

export default function Navigation(props) {
    const [value, setValue] = useState(0);

    const handleChange = (e, value) => {
        setValue(value);
    };
    const refreshPage = () => {
        window.location.reload();
    };
    
    useEffect(() => {
        switch (window.location.pathname) {
            case "/":
                if (value !== 0) {
                    setValue(0);
                }
                break;
                default:
                break;
        }
    }, [value]);


    return (
      <React.Fragment>
        <ElevationScroll>
          <AppBar
            position="relative"
            sx={{ borderBottom: "2px solid black" }}
          >
            <Toolbar disableGutters>
                <img 
                  src={logo} 
                  alt="nasa logo"
                  sx={{
                    height: "8em",
                    marginLeft: "0.2em",
                  }}
                />
                <Typography variant="h1" sx={{ textAlign: "center" }}>
                  Nasa<br/>Photos
                </Typography>
                <Tabs
                  value={value}
                  onChange={handleChange}
                  sx={{ marginLeft: "auto" }}
                  indicatorColor="primary"
                >
                  <Tab
                    sx={{
                      ...theme.typography.tab,
                      minWidth: 10,
                      marginRight: "50px",
                      opacity: 1,
                      // 注意原代码少了冒号，hover不会生效，此处已修正
                      "&:hover": {
                          color: theme => theme.palette.common.purple,
                          textDecoration:"none",
                      },
                    }}
                    component={Link}
                    onClick={refreshPage}
                    to="/"
                    label="Home"
                  />
                </Tabs>
            </Toolbar>
          </AppBar>
        </ElevationScroll>
      </React.Fragment>
    );
}

方案2：使用styled API改写（和原makeStyles用法更接近） #

如果更喜欢原来的类名调用风格，可以用styled API定义样式组件：

import { styled } from "@mui/material/styles";
import { Tabs, Tab } from "@mui/material";

// 定义样式组件
const LogoImg = styled('img')(({ theme }) => ({
  height: "8em",
  marginLeft: "0.2em",
}));

const StyledTabs = styled(Tabs)(({ theme }) => ({
  marginLeft: "auto",
}));

const StyledTab = styled(Tab)(({ theme }) => ({
  ...theme.typography.tab,
  minWidth: 10,
  marginRight: "50px",
  opacity: 1,
  "&:hover": {
      color: theme.palette.common.purple,
      textDecoration:"none",
  },
}));

// 组件内直接用上面定义的组件替换原来的原生组件即可
export default function Navigation(props) {
  // 原有逻辑保持不变
  return (
    // 其余代码保持不变
    <LogoImg src={logo} alt="nasa logo"/>
    {/* 替换Tabs为StyledTabs，替换Tab为StyledTab即可 */}
    <StyledTabs
      value={value}
      onChange={handleChange}
      indicatorColor="primary"
    >
      <StyledTab
        component={Link}
        onClick={refreshPage}
        to="/"
        label="Home"
      />
    </StyledTabs>
  )
}

补充说明 #

如果你非要继续用makeStyles，需要先安装@mui/styles依赖，并且在App.js外层包裹StyledEngineProvider指定用jss引擎，但这个方案是MUI为了兼容旧版本保留的，不推荐使用，性能不如新的emotion方案。

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