有没有办法在 React 中使用 Material UI 来实现水平时间线？答案

【问题标题】：Is there a way to implement horizontal timeline using Material UI in React?有没有办法在 React 中使用 Material UI 来实现水平时间线？
【发布时间】：2020-07-30 14:12:52
【问题描述】：

我正在尝试使用 React 中的 Material UI 实现水平时间线。在他们的文档中，我只能找到垂直时间线演示，并且找不到任何可以直接更改对齐方式的道具。有没有办法解决这个问题？

我想实现类似下图的东西，但是是水平的。

【问题讨论】：

谷歌没有给你什么好主意吗？当我搜索时，我通过搜索 horizontal timelines ui 得到了一些不错的结果
您能否详细介绍一下您的用例，因为使用 Stepper 可能是更好（更容易）的方法。
@MikeW 这个问题是关于用这个库（material-ui.com）具体实现它。
@BasvanderLinden 道歉 - 我错过了
@BasvanderLinden 我编辑了我的帖子，提供了更多细节。我也考虑过步进器，但后来我觉得它会很复杂，因为我不能使用像 align="alternate" 这样的属性。

标签： reactjs material-ui timeline

【解决方案1】：

您可以覆盖时间线样式并执行以下操作：

const useStyles = makeStyles({
  timeline: {
    transform: "rotate(90deg)"
  },
  timelineContentContainer: {
    textAlign: "left"
  },
  timelineContent: {
    display: "inline-block",
    transform: "rotate(-90deg)",
    textAlign: "center",
    minWidth: 50
  },
  timelineIcon: {
    transform: "rotate(-90deg)"
  }
});

function App() {
  const classes = useStyles();

  return (
    <Timeline className={classes.timeline} align="alternate">
      <TimelineItem>
        <TimelineSeparator>
          <CheckCircleOutlineIcon
            color="primary"
            className={classes.timelineIcon}
          />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent className={classes.timelineContentContainer}>
          <Paper className={classes.timelineContent}>
            <Typography>Eat</Typography>
          </Paper>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <PauseCircleFilledIcon
            color="primary"
            className={classes.timelineIcon}
          />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent className={classes.timelineContentContainer}>
          <Paper className={classes.timelineContent}>
            <Typography>Code</Typography>
          </Paper>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <CachedIcon color="primary" className={classes.timelineIcon} />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent className={classes.timelineContentContainer}>
          <Paper className={classes.timelineContent}>
            <Typography>Sleep</Typography>
          </Paper>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <CachedIcon color="primary" className={classes.timelineIcon} />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent className={classes.timelineContentContainer}>
          <Paper className={classes.timelineContent}>
            <Typography>Repeat</Typography>
          </Paper>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <ErrorIcon color="primary" className={classes.timelineIcon} />
        </TimelineSeparator>
        <TimelineContent className={classes.timelineContentContainer}>
          <Paper className={classes.timelineContent}>
            <Typography>Sleep</Typography>
          </Paper>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

如果标签不在同一高度，请调整minWidth。

结果如下：

使用这种方法会感到奇怪的一点是，由于旋转，视觉上最左边的元素是时间轴中的最后一个元素。

【讨论】：

【解决方案2】：

如果您愿意，可以使用步进器作为替代解决方案

Material UI stepper

【讨论】：