如何移除Material UI中TimelineItem组件的左侧内边距？

问题原因 #

你设置的样式没生效主要有4个核心原因：

1. 你定义的.timeline样式没有绑定到<Timeline>组件上，导致Timeline默认的内置padding没有被覆盖
2. MUI组件内置样式的优先级高于行内style属性，直接写行内样式会被默认样式覆盖
3. 你把<Timeline>放在了map循环内部，每条数据都渲染一个独立的Timeline组件，多个Timeline的默认间距会叠加，导致额外边距
4. DialogContent的样式绑定写法错误，外层容器的默认padding也会被误认为是TimelineItem的左边距

具体修改方案 #

1. 修正trace.js代码

调整结构，把Timeline移到循环外部，同时给组件绑定对应的样式类：

const useStyles = makeStyles((theme) => ({
  timeline: {
    padding: 0,
    margin: 0,
  },
  timelineItem: {
    padding: 0,
    margin: 0,
  },
  oppositeContent: {
    padding: 0, // 可根据需要调整，清除时间文本的内边距
  },
  content: {
    padding: 0,
    margin: 0
  },
  secondaryTail: {
    backgroundColor: theme.palette.secondary.main,
  },
}));

export default function Trace (props) {
  const classes = useStyles();
    return (
      {/* 把Timeline移到map外面，全局只渲染一个Timeline容器 */}
      <Timeline className={classes.timeline} align="alternate">
        {details.map((row) => (
          <TimelineItem key={row.stamp} className={classes.timelineItem}>
            <TimelineOppositeContent className={classes.oppositeContent}>
              <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>
    );
}

2. 修正TraceDialog.js中DialogContent的样式写法

修正DialogContent的样式绑定逻辑，清除外层容器的多余内边距：

const useStyles = makeStyles((theme) => ({
  root: {
      margin: 'auto',
      minHeight: '400px',
      maxHeight: '600px',
  },
  dialogContent: {
    padding: '2px 2px', // 自定义DialogContent的内边距
  }
}));

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} className={classes.dialogContent}>
            <Trace waybillno={waybillno} type={type} extra={extra}/>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            退出
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

如果修改后依然存在边距，可以在样式属性后加!important强制覆盖默认样式，例如padding: 0 !important;。

内容的提问来源于stack exchange，提问作者will