AccordionSummary first and last child's corners do not display as rounded

[datoslabs]

When AccordionSummary is given an opaque background color, the first child's top-left/right and last child's bottom-left/right corners appear to be squared even though the MuiAccordion-rounded:first-child and MuiAccordion-rounded:last-child styles are correctly applied. This occurs because the AccordionSummary's corners are squared, stacking on top of the parent div (ie Accordion); when AccordionSummary's background color is transparent, this does not cause an issue but when its background color is opaque, the first and last Accordions' corners will appear as squared.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When AccordionSummary is given an opaque background color, the first child's top-left/right and last child's bottom-left/right corners appear to be squared instead of rounded.

Expected Behavior 🤔

Frist and last Accordion's corners should be rounded.

Steps to Reproduce 🕹

Steps:

1. Open the Simple accordion example in codesandbox.io - https://codesandbox.io/s/ccmf9
2. Note the first and last accordion's corners are rounded.
3. Add style={{backgroundColor:'blue'}} to each of the AccordionSummary elements
4. Corners are showing as squared.

Context 🔦

Accordion display should be consistent and its first and last child's corner rounding should not be affected by the AccordionSmmary's color.

Your Environment 🌎

Material-ui Accordion demo example.

[tancarlson]

Process Completed I have solved the problem but does not pass the CI...

tancarlson:scc-branch

[tancarlson]

Those are the problem encountered

[eps1lon]

Thanks for the feedback.

Frozen repro with v5: https://codesandbox.io/s/basicaccordion-material-demo-forked-l3u0y?file=/demo.tsx

We could fix this by adding style={{overflow:'hidden'}} to the parent Accordion or applying the same border-radius to the AccordionDetails and AccordionSummary.

Would be nice if somebody could explore both of these approaches and file a PR with what they think works best so that we can investigate.

[kinshukshah]

Hi @eps1lon I will take up the issue and create a PR.

[kinshukshah]

Hi @eps1lon I have created a Pull Request can you please go through it.

[kinshukshah]

These are the checks I am not able to pass can you help me

[Anurag-Band]

while working with Accordion I came across this issue, How I solved it in my project is I put below styles in Parent of Accordion,

"& .MuiPaper-root:first-of-type": { borderRadius: "12px !important", }, "& .MuiPaper-root:last-of-type": { borderRadius: "12px !important", }