[Accordion] Cannot create custom <AccordionSummary> variants

Open
#23,888 17 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, react
Domain
design, frontend

Research direction

Start by reading the AccordionSummary component and the AccordionContext referenced in the issue, then review the existing public API, types, and documentation around AccordionSummary. Done means a custom summary can support layouts such as an expand icon before the content without depending on the internal context, with the behavior covered by the relevant component tests.

Written by the indexing model from the issue text.

Description

ready to take scope: accordion type: new feature
  • 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.

Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.