Material-UI：删除 TimelineItem missingOppositeContent:before 元素

Question

我正在使用 Material-UI 并构建一个时间线。我的代码如下：

<Timeline align="right" className={classes.monthlyContainer}>
    <TimelineItem >
        <TimelineSeparator className={classes.timelineSeparator}>
            <TimelineDot className={classes.timelineDot} />
            <TimelineConnector className={classes.timelineConnector} />
        </TimelineSeparator>
        {(data.map(url =>
            <TimelineContent className={classes.memsImageContainer}>
                <img
                    className={classes.memsImage}
                    src={url}
                    alt="MEMs"
                />
            </TimelineContent>
        ))}
    </TimelineItem>
</Timeline>

当我渲染网页时，Material-UI 时间线不断创建一个.MuiTimelineItem-missingOppositeContent:before元素，该元素将我的时间线布局向左移动。

当我检查元素时，这就是我所看到的：

<li class="MuiTimelineItem-root MuiTimelineItem-alignRightMuiTimelineItem-missingOppositeContent">
    <div class="MuiTimelineSeparator-root makeStyles-timelineSeparator-4">
        <span class="MuiTimelineDot-root makeStyles-timelineDot-5 MuiTimelineDot-defaultGrey">
        </span>
        <span class="MuiTimelineConnector-root makeStyles-timelineConnector-6">
        </span>
    </div>
</li>

当我检查样式时，这就是我所拥有的：

.MuiTimelineItem-missingOppositeContent:before {
    flex: 1;
    content: "";
    padding: 6px 16px;
    padding-left: 0px;
    padding-right: 0px;

我在这里的代码和盒子中重新创建了它

我怎样才能删除这个元素？

Answer 1

的定义默认样式的missingOppositeContent元素如下：

  /* Styles applied to the root element if no there isn't TimelineOppositeContent provided. */
  missingOppositeContent: {
    '&:before': {
      content: '""',
      flex: 1,
      padding: '6px 16px',
    },
  },

您可以使用相同的结构覆盖默认样式。在主题中覆盖它如下所示：

const Theme = createMuiTheme({
  overrides: {
    MuiTimelineItem: {
      missingOppositeContent: {
        "&:before": {
          display: "none"
        }
      }
    }
  }
});

您还可以根据具体情况执行此操作（如果您的代码中存在其他需要缺少对立内容样式的情况），请使用withStyles：

const TimelineItem = withStyles({
  missingOppositeContent: {
    "&:before": {
      display: "none"
    }
  }
})(MuiTimelineItem);