扩展面板中的自定义组件无法呈现答案

【问题标题】：Custom component within ExpansionPanel fails to render扩展面板中的自定义组件无法呈现
【发布时间】：2019-10-10 19:00:49
【问题描述】：

为什么下面的代码不渲染集群？

如果我直接使用 ExpansionPanelSummary（如代码 cmets 所示），那么集群会正确渲染。

function ClusterSummary(props) {
  return (
    <ExpansionPanelSummary>
      <Typography>{props.cluster.title}</Typography>
    </ExpansionPanelSummary>
  );
}

function Clusters(props) {
  return (
    <div>
      {props.clusters.map((cluster) => 
        <ExpansionPanel key={cluster.id} cluster={cluster}>
          {/* <ExpansionPanelSummary>
            <Typography>{cluster.title}</Typography>
          </ExpansionPanelSummary> */}
          <ClusterSummary key={cluster.id} cluster={cluster} />
        </ExpansionPanel>
      )}
    </div>
  );
}

codestandbox 上的互动链接： https://codesandbox.io/s/thirsty-sammet-596ee

我正在使用 material-ui/core 3.9.3

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这个问题的原因和解决方法和我这里回答的问题一样：

How can I override ExpansionPanelSummary deep elements with styled-components?

您需要以下方法来修复它：

function ClusterSummary(props) {
  return (
    <ExpansionPanelSummary>
      <Typography>{props.cluster.title}</Typography>
    </ExpansionPanelSummary>
  );
}
// This is what needs to be added
ClusterSummary.muiName = "ExpansionPanelSummary";

请参阅我之前的回答，详细了解为什么需要这样做。

【讨论】：