如何在Material-UI的makeStyles中实现TypeScript类名自动补全

• 修正导入路径
  确保你导入的makeStyles、Theme、createStyles均来自@material-ui/core/styles（v4版本），不要导入独立的@material-ui/styles包，独立包未绑定MUI主题类型，无法自动推导类名映射。
• 修正代码写法，让TS自动推导类型
  你当前手动给makeStyles传入了前两个泛型参数，但缺失了第三个类名key的泛型参数，导致TS无法推导返回的classes包含的属性。可以直接删除手动传入的泛型，让TS自动推导所有类型，同时你原有代码中makeStyles调用末尾缺失闭合括号，需要补上：

import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import { useState } from 'react';

export interface StyleProps{
    open : boolean;
}

// 不手动传入泛型，由TS自动推导
const useStyles = makeStyles((theme: Theme) => createStyles({
  toolbar: {
    display: "flex",
    justifyContent: "space-between",
    backgroundColor: "tomato",
  },
  loginbg: {
    display: "none",
    [theme.breakpoints.up("sm")]: {
      display: "block",
    },
  },
  loginsm: {
    display: "block",
    [theme.breakpoints.up("sm")]: {
      display: "none",
    },
  },
}));

export default function Header() {
  const [open, setOpen] = useState<boolean>(false); 
  const classes = useStyles({open});
  // 此时输入classes.就会自动提示所有定义的类名
  return (
    // 原有组件逻辑
  )
}

• 检查tsconfig.json配置
  确保配置项满足以下要求：

{
  "compilerOptions": {
    "strict": true, 
    "noImplicitAny": true,
    "typeRoots": ["node_modules/@types"]
  }
}

如果noImplicitAny关闭，TS会将classes推导为any类型，自然不会有补全提示。

• 如果你使用的是MUI v5版本
  v5已废弃makeStyles，如果要继续使用需要安装@mui/styles包，且默认不支持自动类型推导，推荐改用官方推荐的tss-react库的makeStyles，原生支持TS类名自动补全。

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