Material-UI: Remove TimelineItem missingOppositeContent:before element

user_4530173 0
Viewed 2768

I'm using Material-UI and building a timeline. My code is as follows:

<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>

When I render the webpage, the Material-UI timeline keeps creating a .MuiTimelineItem-missingOppositeContent:before element which is shifting the layout of my timeline to the left.

When I inspect the element, this is what I see:

enter image description here

<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>

When I inspect the styles, this is what I have:

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

I have recreated it in codesandbox here

How can I remove this element?

material-ui reactjs css
2 Answers

The definition of the default styles for the missingOppositeContent element is as follows:

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

You can override the default styles using the same structure. Overriding this in the theme would look like the following:

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

Edit Remove missing opposite content - theme

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

Edit Remove missing opposite content - withStyles

user_74959300

You won't believe that you just need to add the <TimelineOppositeContent> component and set display property as 'none'. And it will be solved.

user_174865940
Related