如何在React中使用Material UI实现水平时间轴？

哈哈，这个问题我之前也踩过坑！Material UI官方的Timeline组件确实默认只有垂直布局，没有直接的horizontal属性可以一键切换，但咱们完全可以通过几种方式搞定水平时间轴，下面给你分享几个实用的方案：

最直接的方式就是通过MUI的样式定制能力，修改官方TimeLine相关组件的布局方向。你可以用styled或者makeStyles来覆盖默认样式，核心是把时间轴的flex方向从column改成row，再调整连接线、节点的对齐方式。

这里给你一个具体的代码示例：

import { styled } from '@mui/material/styles';
import Timeline from '@mui/lab/Timeline';
import TimelineItem from '@mui/lab/TimelineItem';
import TimelineSeparator from '@mui/lab/TimelineSeparator';
import TimelineConnector from '@mui/lab/TimelineConnector';
import TimelineContent from '@mui/lab/TimelineContent';
import TimelineDot from '@mui/lab/TimelineDot';

// 改造根时间轴为横向布局
const HorizontalTimeline = styled(Timeline)(({ theme }) => ({
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  gap: theme.spacing(4),
}));

// 调整每个时间节点为垂直排列（内容在节点下方）
const HorizontalTimelineItem = styled(TimelineItem)({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
});

// 把垂直连接线改成横向
const HorizontalTimelineConnector = styled(TimelineConnector)(({ theme }) => ({
  height: 'auto',
  width: theme.spacing(6),
  transform: 'rotate(90deg)',
}));

export default function MyHorizontalTimeline() {
  return (
    <HorizontalTimeline>
      <HorizontalTimelineItem>
        <TimelineSeparator>
          <TimelineDot color="primary" />
          <HorizontalTimelineConnector />
        </TimelineSeparator>
        <TimelineContent sx={{ textAlign: 'center' }}>需求确认</TimelineContent>
      </HorizontalTimelineItem>
      <HorizontalTimelineItem>
        <TimelineSeparator>
          <TimelineDot color="primary" />
          <HorizontalTimelineConnector />
        </TimelineSeparator>
        <TimelineContent sx={{ textAlign: 'center' }}>原型设计</TimelineContent>
      </HorizontalTimelineItem>
      <HorizontalTimelineItem>
        <TimelineSeparator>
          <TimelineDot color="primary" />
        </TimelineSeparator>
        <TimelineContent sx={{ textAlign: 'center' }}>开发完成</TimelineContent>
      </HorizontalTimelineItem>
    </HorizontalTimeline>
  );
}

如果不想自己写样式，也可以找npm上已经基于Material UI封装好的水平时间轴组件，比如@mui-treasury/components里的HorizontalTimeline，这类组件已经帮你处理好了布局和响应式，直接安装引入就能用，能节省不少自定义的时间。不过要注意组件版本和你项目里的MUI版本兼容哦。

要是你需要更高的灵活性，完全可以用MUI的基础组件（比如Grid、Box、Divider、Icon）自己拼一个水平时间轴。这种方式虽然需要多写点代码，但能完全按照你的设计需求定制细节。

举个简单的例子：

import { Grid, Box, Divider, Typography } from '@mui/material';
import CircleIcon from '@mui/icons-material/Circle';

export default function CustomHorizontalTimeline() {
  const timelineData = [
    { title: '启动', desc: '项目立项' },
    { title: '迭代', desc: '版本1.0开发' },
    { title: '上线', desc: '正式发布' },
  ];

  return (
    <Box sx={{ padding: '2rem 1rem' }}>
      <Grid container justifyContent="center" alignItems="center" spacing={3}>
        {timelineData.map((item, idx) => (
          <>
            <Grid item textAlign="center">
              <CircleIcon sx={{ fontSize: 24, color: '#1976d2' }} />
              <Typography variant="h6" sx={{ marginTop: 1 }}>{item.title}</Typography>
              <Typography variant="body2" color="text.secondary">{item.desc}</Typography>
            </Grid>
            {/* 最后一个节点不需要连接线 */}
            {idx !== timelineData.length - 1 && (
              <Grid item sx={{ width: '6rem' }}>
                <Divider sx={{ height: 2, bgcolor: '#1976d2' }} />
              </Grid>
            )}
          </>
        ))}
      </Grid>
    </Box>
  );
}

如果需要响应式适配，别忘了在样式里用MUI的断点（比如theme.breakpoints.down('sm')），在小屏幕下把时间轴切回垂直布局，提升移动端的体验~

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