typescript 响应材质UI时间轴

dxxyhpgq 于 2023-01-31 发布在 TypeScript

关注(0)|答案(2)|浏览(178)

这是我第一次使用材料UI，我有麻烦，使时间线的React。目前我正在使用aling 'alternate'，但我想它被显示为align ='left '时，是在一个移动或一定的宽度。我尝试了不同的方法，但没有工作。该项目是一个Next.Js应用程序与Typescript。这是代码：

<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>

先谢了。

typescript

来源：https://stackoverflow.com/questions/68809689/responsive-material-ui-timeline

2条答案

按热度按时间

laawzig21#

你可以这样使用useMediaQuery：

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

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

这里，如果大小为中等（md）或以上，则使用alternate，如果较小，则使用left。

赞(0）回复(0）举报 2023-01-31

7z5jn7bk2#

是的，太晚了。还在写这个答案来帮助像我这样的人。
如果你不添加TimelineOppositeContent，那么时间线将显示在中心。要使它左对齐，请使用下面代码

<TimelineItem>
    <TimelineOppositeContent sx={{ display: 'none' }}></TimelineOppositeContent>
    <TimelineSeparator><TimelineDot /><TimelineConnector /></TimelineSeparator>
    <TimelineContent>Eat</TimelineContent>
</TimelineItem>

如果你不添加时间轴相反的内容，那么：：before将在左边添加空间，使时间轴位于中间。所以，最好有TimelineOppositeContent并隐藏它。

赞(0）回复(0）举报 2023-01-31

我来回答

typescript 响应材质UI时间轴

2条答案

相关问题

热门标签

最新问答