When using the Timeline component to display information, there are three columns: TimelinItem, TimelineSeparator, and TimelineContent. I tried setting the padding of TimelineItem to 0 but it didn't work.
The <Trace/> component is a sub-component of <DialogContent> in TraceDialog.js.
In trace.js:
style={{margin:0,padding:0}}
const useStyles = makeStyles((theme) => ({
timeline: {
padding: 0,
margin: 0,
},
content: {
padding: 0,
margin: 0
},
secondaryTail: {
backgroundColor: theme.palette.secondary.main,
},
}));
export default function Trace (props) {
const classes = useStyles();
return (
details.map((row) => (
<Timeline key={row.stamp} align="alternate">
<TimelineItem style={{margin:0,padding:0}}>
<TimelineOppositeContent>
<Typography variant="caption" color="textSecondary">
{TimeFormat(row.time)}
</Typography>
</TimelineOppositeContent>
<TimelineSeparator>
<TimelineDot color={row.first ? "primary":"grey"}/>
{!row.last ? <TimelineConnector /> : null}
</TimelineSeparator>
<TimelineContent>
<Typography variant="caption" className={classes.content} align="justify">{row.remark}</Typography>
</TimelineContent>
</TimelineItem>
</Timeline>))
);
}
In TraceDialog.js:
const useStyles = makeStyles((theme) => ({
root: {
margin: 'auto',
minHeight: '400px',
maxHeight: '600px',
},
}));
export default function TraceDialog(props) {
const classes = useStyles();
return (
<div>
<Dialog
className={classes.root}
open={openTrace}
onClose={handleClose}
scroll='paper'
fullWidth={true}
aria-labelledby="scroll-dialog-title"
aria-describedby="scroll-dialog-description"
>
<DialogTitle id="scroll-dialog-title">{'运单号:' + waybillno}</DialogTitle>
<TraceStepper status={status}/>
<DialogContent ref={descriptionElementRef} classes={{ MuiDialogContent: '2px,2px' }}>
<Trace waybillno={waybillno} type={type} extra={extra}/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Exit
</Button>
</DialogActions>
</Dialog>
</div>
);
}