[Accordion] Unable to use component with AccordionSummary inside Accordion

[WoodenPC]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Creating components like

const summary = React.memo(props => (
  <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
    <Typography>General settings</Typography>
    <Typography>I am an expansion panel</Typography>
  </ExpansionPanelSummary>
));

should work in

<ExpansionPanel>
  <Summary />
</ExpansionPanel>

Current Behavior 😯

If we have some controlled inputs inside expansion panel then every input change will trigger render function and ExpansionPanelSummary and content inside it will be rerendered. I trying to avoid that and created new stateless component with React.memo so there will be no unnecesary rerenders. But its not working :(

If I am doing something wrong please tell me how can i make this working :)

Steps to Reproduce 🕹

Link:

1.https://codesandbox.io/s/material-demo-po5mw

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	4.0.0-beta
React	16.8.0
Browser	Google Chrome 74.0.3729.157
TypeScript	no
etc.

[eps1lon]

Codesandbox not working is a combination of outdated customization API and current customization API not being used properly.

For 4.x you just have to forward the props of your summary component to ExpansionPanelSummary: https://codesandbox.io/s/custom-expansionpanelsummary-mospj. For 3.x you also have to hoist some statics: summary.muiName = ExpansionPanelSummary.muiName;.

Implementation notes: Another reason why context is better for state sharing. Avoids one pitfall when customizing.