响应式 Material UI 时间线

Question

这是我第一次使用 Material Ui，我无法响应时间轴。目前我正在使用 aling 'alternate'，但我希望它在移动或特定宽度时显示为 align='left'。我尝试了不同的方法，但 none 奏效了。该项目是一个带有 Typescript 的 Next.Js 应用程序。这是代码：

<Timeline align={matches ? 'alternate' : 'left'}>
    <TimelineItem className={classes.primaryTail}>
        <TimelineOppositeContent>
            <h5>2015</h5>
        </TimelineOppositeContent>
        <TimelineSeparator>
            <TimelineDot>
                <FaUniversity size='1.5em' />
            </TimelineDot>
            <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
            <Paper elevation={24} className={classes.paper}>
                <h5>Some title</h5>
                <p>Some paragraph</p>
            </Paper>
        </TimelineContent>
    </TimelineItem>
</Timeline>

提前致谢。

Answer 1

你可以使用 useMediaQuery，像这样：

const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.up('md'));


<Timeline align={matches?'alternate':'left'}>
  ...
</Timeline>

此处如果大小为中等 (md) 或更大，则使用 alternate，如果较小，则使用 left。

响应式 Material UI 时间线

Responsive Material UI Timeline

timeline

typescript

material-ui

tsx

next.js