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

Question

使用the docs/examples覆盖使用样式组件的Material UI样式，我设法在ExpansionPanel和ExpansionPanelDetails中设置根和“更深层元素”的样式。

然而，当我使用相同的技术从传递给ExpansionPanelSummary的函数返回被重写的styled()时，ExpansionPanelSummary在DOM中移动并且整个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>

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

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

Answer 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";