MUI5（TypeScript）中向makeStyle传递Props的正确实现方式

安全阿岳

2026-7-30

MUI4 迁移至 MUI5 解决 TypeScript 类型约束错误

问题场景

将MUI4的makeStyles代码迁移到MUI5时，使用tss-react/mui的makeStyles出现类型错误：

Type 'Props' does not satisfy the constraint 'string'.ts(2344)

原MUI4代码

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

type Props = {
  darkMode?: boolean;
};

const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
  createStyles({
    button: (props: Props) => ({
      color: props.darkMode ? '#fff' : '#AE4',
    }),
  }),
);

export default useStyles;

迁移后报错的MUI5代码

import { makeStyles } from 'tss-react/mui'
import { Theme } from '@mui/material/styles'

type Props = {
  darkMode?: boolean;
};


const useStyles = makeStyles<Theme, Props>((theme: Theme) => ({
  return {
    button: (props: Props) => ({
      color: props.darkMode ? '#fff' : '#AE4',
    }),
  }
})

错误原因

tss-react的makeStyles泛型参数顺序和MUI4完全相反：MUI4是<Theme, Props>，而tss-react中第一个泛型是组件props类型，第二个才是主题类型（可选，默认匹配MUI的Theme）。同时，回调函数的写法有误，不需要额外嵌套return对象。

正确实现方式

import { makeStyles } from 'tss-react/mui';
import { Theme } from '@mui/material/styles';

type Props = {
  darkMode?: boolean;
};

// 调整泛型顺序为 <Props, Theme>，回调直接返回样式对象
const useStyles = makeStyles<Props, Theme>()((theme, props) => ({
  button: {
    color: props.darkMode ? '#fff' : '#AE4',
  },
}));

export default useStyles;

或者更简洁的写法（Theme可省略，默认自动推导）：

import { makeStyles } from 'tss-react/mui';

type Props = {
  darkMode?: boolean;
};

const useStyles = makeStyles<Props>()((theme, props) => ({
  button: {
    color: props.darkMode ? '#fff' : '#AE4',
  },
}));

export default useStyles;