Пользовательский компонент в 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>
  );
}

Интерактивная ссылка на кодовый ящик: https://codesandbox.io/s/thirsty-sammet-596ee

Я использую материал-интерфейс / ядро ​​3.9.3

Answer 1

Эта проблема имеет ту же причину и решение, что и вопрос, на который я ответил здесь:

Как мне переопределить глубокие элементы ExpansionPanelSummary с помощью styled-компонентов?

Вам нужноследующее, чтобы исправить это:

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

См. мой предыдущий ответ для деталей о том, почему это необходимо.