ExpansionPanel中的自定义组件无法呈现

Question

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

如果我直接使用ExpansionPanelSummary（如代码注释所示），则群集将正确呈现。

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

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

有关为什么需要这样做的详细信息，请参见我以前的答案。