[ExpansionPanel] Cannot override margins with 'classes' prop

I am trying to make the expanded summary area of the ExpansionPanel much thinner, but I have found that the necessary styles cannot be overridden as normal. It seems that a more specific CSS class is used, which always overrides anything you specify.

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

Expected Behavior

The margin and min-height CSS values should apply to the element.

Current Behavior

Regardless of what you specify, margin is always 20px 0 and min-height is always 64px.

Steps to Reproduce (for bugs)

const styles = theme => ({
  expanded: {
    backgroundColor: 'red',
    minHeight: 0,
    marginTop: 0,
    marginBottom: 0,
  },
});
<ExpansionPanelSummary classes={{expanded: classes.expanded}}>

backgroundColor gets applied to the expanded summary area, but the other listed CSS attributes get overridden.

Context

I am trying to make the expanded summary area the same size as the compressed area, and both of them smaller than the default (by removing the padding).

Your Environment

Tech	Version
Material-UI	1.0.0-beta.44
browser	Firefox and Chrome

[oliviertassinari]

@felipezacani Are you saying that https://material-ui.com/demos/expansion-panels/#customized-expansion-panel doesn’t help?

[adam-nielsen]

Ah right, sorry I didn’t notice Codesandbox had a console! @kof Might I humbly suggest changing %s to "%s" in the warning? If I had seen the error Could not find the referenced rule expanded in xxx I would be looking in the wrong place for something being expanded, I wouldn’t have realised that expanded was actually the name of the problematic rule!

Thanks also @oliviertassinari for the explanation of what $ is for. I have looked through the JSS docs but still haven’t found where its purpose is explained! Are there any docs that go into more detail? Maybe I’m just looking for the wrong terms - searching for dollar and $ don’t bring anything up.

Thanks again for your help!