Material-UI:删除TimelineItem missingOppositeContent:元素之前 [英] Material-UI: Remove TimelineItem missingOppositeContent:before element

问题描述

我正在使用Material-UI并建立时间表.我的代码如下:

 <时间轴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}>< imgclassName = {classes.memsImage}src = {url}alt ="MEMs"/></TimelineContent>))}</TimelineItem></时间轴> 

渲染网页时，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:在{之前flex:1;内容:"；内边距:6px 16px;padding-left:0px;padding-right:0px; 

我已经在codesandbox

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:

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

解决方案

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

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

这篇关于Material-UI:删除TimelineItem missingOppositeContent:元素之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！