I am trying to align the text in my Timeline component from Material Ui always towards the center of the timeline. The TimelineContent contains Paper, Typography (for title and description), and an image.
Currently, I have multiple TimelineContent elements created using .map() function, so simply using flex-direction: row-reverse won't solve the issue.
Here is a visual example of the problem: https://i.sstatic.net/6MYMD.png
- The first TimelineContent has the text aligned to the left, which is correct.
- The second TimelineContent has the text not aligned properly to the right.
Below is the code snippet I am currently working with:
<Timeline align="alternate">
{result.map((index) => {
return (
<TimelineItem className={classes.timelineStyle}>
<TimelineOppositeContent>
<Typography variant="body2" color="textSecondary">
{index.sif_date}
</Typography>
</TimelineOppositeContent>
<TimelineSeparator>
<TimelineDot className={classes.dot}>
<LaptopMacIcon/>
</TimelineDot>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<Paper elevation={3} className={classes.paper}>
<Grid style={{display: 'flex', flexWrap: 'nowrap'}}>
<Grid item>
<Typography variant="h6" component="h1">
{index.sif_titre}
</Typography>
<Typography style={{fontSize: 'smaller'}}>
{index.sif_msg}
</Typography>
</Grid>
<Grid item>
<Zoom overlayBgColorStart='rgba(73, 80, 87, 67)' overlayBgColorEnd='rgba(73, 80, 87, 67)' zoomMargin={100}>
<img src={index.sif_image} alt={index.sif_image} className={classes.img} style={{maxWidth: 200, maxHeight: 200}}/>
</Zoom>
</Grid>
</Grid>
</Paper>
</TimelineContent>
</TimelineItem>
)
})
}
</Timeline>const useStyles = makeStyles((theme) => ({
paper: {
padding: '6px 16px',
textAlign: 'center',
backgroundColor: 'white !important',
display: 'flex'
...
}));Edit:
Here is the full code snippet for my page:
import React from 'react';
...
export default index;