Material-ui: [Accordion] How can I customize the expanded state?

[Stianhn]

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

Expected Behavior

I expect the styling only to apply to the container and not the child element or toggle icon.

Current Behavior

When I add box shadow it also adds individual box shadows for the headline and the toggle icon.

Steps to Reproduce

Link:
https://codesandbox.io/s/810vx50pp0

[oliviertassinari]

@Stianhn The correct approach is the following:

  overrides: {
    MuiExpansionPanelSummary: {
-     expanded: {
-       boxShadow: "0 1px 12px 0 rgba(0,0,0,.11)"
-     },
+     root: {
+       "&$expanded": {
+         boxShadow: "0 1px 12px 0 rgba(0,0,0,.11)"
+       }
      }
    }
  }

The expanded class name is a state modifier, as explained in https://material-ui.com/customization/overrides/#overriding-with-classes, we increase the specificity for them.
Example: https://codesandbox.io/s/zzl7x4z2o3.

[jmc420]

I am being dumb but I don't understand this.

I raised this question on stackoverflow:

https://stackoverflow.com/questions/61458978/mui-expansion-panel-summary-expanded-override

And there was a reply here with another answer:

https://stackoverflow.com/questions/55516006/customizing-the-expansionpanel-in-material-ui-and-overwriting-the-styles/61479263#61479263

I don't understand this answer. if you add minHeight:0 to line 18 of demo.js, why does the minHeight gets ignored.

expanded: { width: "85%", minHeight: 0, backgroundColor: "red" }

https://codesandbox.io/s/zl4141wm44

I can see that this answer is somehow to suppress .MuiExpansionPanelSummary-root.Mui-expanded, but I can't see how you do this.

Basically I am asking how do you override this CSS class without creating a custom component as is shown in the other answer.

Could someone fork https://codesandbox.io/s/zl4141wm44 to show it can be done without a custom component?