小编典典

如何使用样式组件覆盖ExpansionPanelSummary深层元素?

reactjs

使用的文档/例子的覆盖材料UI造型与风格的成分,我已经成功地风格内的根源,“更深层次的元素”
ExpansionPanelExpansionPanelDetails

但是,当我使用相同的技术返回ExpansionPanelSummary传递给的函数的覆盖时,DOM中styled()ExpansionPanelSummary移动以及整个移动将ExpansionPanel不再正确呈现。

所应用的技术ExpansionPanel(在容器上按预期工作ExpansionPanel):

import MUIExpansionPanel from '@material-ui/core/ExpansionPanel';

export const ExpansionPanel = styled(props => (
  <MUIExpansionPanel
    classes={{expanded: 'expanded'}}
    {...props}
  />
))`
  && {
    ...root style overrides
  }
  &&.expanded {
    ...expanded style overrides
  }
`;

ExpansionPanel和朋友的典型DOM(缩写为类名):

<div class="MuiExpansionPanel...">
  <div class="MuiExpansionPanelSummary..." />
  <div class="MuiCollapse-container...>
    <div class="MuiCollapse-wrapper...>
      <div class="MuiCollapse-wrapperInner...>
        <div class="MuiExpansionPanelDetails..." />
      </div>
    </div>
  </div>
</div>

当我将上述技术应用于时的DOM ExpansionPanelSummary

<div class="MuiExpansionPanel...">
  <div class="MuiCollapse-container...>
    <div class="MuiCollapse-wrapper...>
      <div class="MuiCollapse-wrapperInner...>
        <div class="MuiExpansionPanelSummary..." />
        <div class="MuiExpansionPanelDetails..." />
      </div>
    </div>
  </div>
</div>

为了完整起见,这是我正在做的事情的最小复制ExpansionPanelSummary,它会触发DOM切换:

export const ExpansionPanelSummary = styled(props => (
  <MUIExpansionPanelSummary
    {...props}
  />
))``;

我的JSX是标准ExpansionPanel设置:

<ExpansionPanel>
  <ExpansionPanelSummary>
    Summary Label
  </ExpansionPanelSummary>
  <ExpansionPanelDetails>
    <div>Some Content</div>
  </ExpansionPanelDetails>
</ExpansionPanel>

阅读 354

收藏
2020-07-22

共1个答案

小编典典

这个困难与使用样式化组件无关,而仅与包装ExpansionPanelSummary在另一个组件中有关。

您可以使用以下包装方式类似地重现此内容ExpansionPanelSummary

const MyCustomSummary = props => {
  return (
    <ExpansionPanelSummary {...props} expandIcon={<ExpandMoreIcon />}>
      <Typography>{props.text}</Typography>
    </ExpansionPanelSummary>
  );
};

有几个类似的组件组,其中Material-
UI父组件会查找特定类型的子组件,并特别对待该子组件。例如,您可以在ExpansionPanel

      if (isMuiElement(child, ['ExpansionPanelSummary'])) {
        summary = React.cloneElement(child, {
          disabled,
          expanded,
          onChange: this.handleChange,
        });
        return null;
      }

幸运的是,Material-UI通过一种简单的方法可以通过muiName属性告诉您的自定义组件与特定的Material-UI组件相同:

MyCustomSummary.muiName = "ExpansionPanelSummary";

或者您的情况如下所示:

export const ExpansionPanelSummary = styled(props => (
  <MUIExpansionPanelSummary
    {...props}
  />
))``;

ExpansionPanelSummary.muiName = "ExpansionPanelSummary";

编辑自定义ExpansionPanelSummary

2020-07-22