[Accordion] Cannot create custom <AccordionSummary> 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.

[dantman]

Why not? We are trying to shift the brand perception around Materials to build UIs, shortened MUI/Material-UI. We probably need to move the Material Design theme under a new package, like @material-ui/md instead of @material-ui/core.

Fair. I just meant a useSlider would probably be so generic it would be equivalent to react-table’s useTable but for sliders. If you think that a headless useTable would’ve fit being published as part of MUI if react-table didn’t already exist, then I’m happy to see a useSlider and a collection of headless UI hooks in MUI.

1. Headless UI hooks: Lowest level, implements the core interactivity for UI components (event handlers, props, state)
2. Unstyled components: Primary consumers of headless UI hooks; the components themselves are coded stateless leaving that the state to the hooks. They provide the standard set of DOM components normally used with the headless UI hooks. And also handle the user friendly integration/compatibility layers MUI provides (classes, sx?, components, etc).
3. Styled (MD) components: Adds Material Design styling to the unstyled components.

[ifndefdeadmau5]

For now I’m just controlling expanded state manually