Accordion: disable separator

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I'd like a prop to disable the separator between accordions. Right now there exists a grey line between each two accordions that I haven't asked for. It's too late now to only render them when a hypothetical enableSeparators prop is included, so we could now provide a disableSeparators prop instead.

Only workaround atm is to set content: none via a styleOverrides, which always feels kind of hacky. I mean, what if MUI in the future decides to draw this line using any other line drawing method? Then this override will no longer have any effect.

Examples 🌈

These lines I'd like to remove:

This has already applied default props in the theme:

MuiAccordion: {
  defaultProps: {
    disableGutters: true,
    square: true,
    elevation: 0,
  },
}

Now the line above an expanded accordion disappears because it is moved to top: -1px which is weird on its own, but I'm sure there's a reason behind doing it that way. More importantly, I want them all gone, all the time.

Motivation 🔦

Motivation is, well, design I guess? Our designer wants them gone, that's all 😀