material-ui: [Accordion] Cannot create custom variants

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

Summary 💡

Right now it’s not possible to customize <AccordionSummary> if your customization cannot be done via props adding styles and stuff into the content div.

Current Behavior 😯

AccordionSummary has a hardcoded content <div> wrapping the children and an icon button outside it in a hardcoded location, so there are some things you cannot customize simply by changing styles.

The AccordionSummary’s accordion behaviours depend on AccordionContext. However AccordionContext is not an official part of MUI, it’s not in the docs or types. So you cannot create your own AccordionContext.

Expected Behavior 🤔

It should be possible to create your own AccordionSummary without needing to use the internal AccordionContext.

Motivation 🔦

I was trying to implement a customized MUI Accordion from the designer I’m working with. Their accordion moved the expandIcon before the content area. However the built-in accordion summary has the expand icon hardcoded as a position=end icon button after the content area.

So naturally I tried to customize AccordionSummary and then fork it because I couldn’t simply customize it and since it’s a custom design it’s reasonable to not expect the built-in AccordionSummary to handle it. Then of course I discovered that it just wasn’t possible officially.