Material-UI: удалить TimelineItem missingOppositeContent: before element

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, который сдвигает макет моей временной шкалы влево.

Когда я осматриваю элемент, я вижу следующее:

Когда я проверяю стили, я получаю следующее:

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

Я воссоздал его в codeandbox здесь

Как удалить этот элемент?

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"
        }
      }
    }
  }
});

You can also do this on a case-by-case basis (in case you have other situations in your code where you want the missing-opposite-content styling) using withStyles:

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

Редактировать Удалить отсутствующий противоположный контент - withStyles