如何刪除 TimelineItem 上的左側填充？

Question

使用 Timeline 列出一些信息，有 3 列TimelinItem ， TimelineSeparator和TimelineContent ，我設置TimelineItem填充 0，它不起作用，作為代碼

<Trace/>是 TraceDialog.js 中<DialogContent>的子組件

跟蹤.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>))
          );
}

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">
                退出
              </Button>
            </DialogActions>
          </Dialog>
        </div>
      );
    }

Answer 1

要刪除左填充您需要在trace.js TimelineOppositeContent中覆蓋您的 MUI styles 像這樣

   const useStyles = makeStyles((theme) => ({
         root: {
           flex: 0.2 
         }, 
         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 className={classes.root}>
   ...