从React Material UI 4迁移到MUI5 如何用styled API实现条件类样式

下面提供两种可直接在TypeScript项目中落地的实现方案：

方案1：使用MUI原生styled API（官方推荐，无额外依赖） #

直接将条件逻辑内置到样式组件中，写法更符合MUI 5的设计理念：

import { styled } from '@mui/material/styles';
// 保持原有常量定义即可
const TRANSITION_DURATION = 200; // 替换为你实际的定义值
const DRAWER_WIDTH = 240; // 替换为你实际的定义值

// 定义样式组件接收的props类型
interface StyledTopBarProps {
  drawer: boolean;
}

const StyledTopBar = styled('div')<StyledTopBarProps>(({ theme, drawer }) => ({
  transition: theme.transitions.create("margin", {
    easing: drawer ? theme.transitions.easing.sharp : theme.transitions.easing.easeOut,
    duration: TRANSITION_DURATION,
  }),
  marginLeft: drawer ? DRAWER_WIDTH : 0,
}));

function Header({ drawer }: IHeader) {
  // 不需要再调用useStyles，直接使用自定义样式组件即可
  return (
    <StyledTopBar drawer={drawer}>
      ...
    </StyledTopBar>
  );
}

方案2：使用tss-react兼容旧版写法（最小改造成本） #

如果希望保留原有makeStyles的写法几乎不改动原有逻辑，可以使用MUI官方推荐的tss-react替代旧版的makeStyles：

1. 先安装依赖：npm install tss-react @emotion/react @emotion/styled
2. 代码实现：

import { makeStyles } from 'tss-react/mui';
// 原有常量定义保持不变
const TRANSITION_DURATION = 200;
const DRAWER_WIDTH = 240;

const useStyles = makeStyles()(theme => ({
  topBar: {
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.sharp,
      duration: TRANSITION_DURATION,
    }),
    marginLeft: DRAWER_WIDTH,
  },
  topBarShift: {
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.easeOut,
      duration: TRANSITION_DURATION,
    }),
    marginLeft: 0,
  },
}));

function Header({ drawer }: IHeader) {
  const { classes } = useStyles();
  // 原有组件逻辑完全不需要改动
  return (
    <div className={`${classes.topBar} ${!drawer && classes.topBarShift}`}>
      ...
    </div>
  );
}

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