AccordionSummary first and last child's corners do not display as rounded #27418
Labels
component: accordion
This is the name of the generic UI component, not the React module!
new feature
New feature or request
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 theMuiAccordion-rounded:first-child
andMuiAccordion-rounded:last-child
styles are correctly applied. This occurs because theAccordionSummary
's corners are squared, stacking on top of the parent div (ieAccordion
); whenAccordionSummary
's background color is transparent, this does not cause an issue but when its background color is opaque, the first and lastAccordions
' corners will appear as squared.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:
style={{backgroundColor:'blue'}}
to each of theAccordionSummary
elementsContext 🔦
Accordion
display should be consistent and its first and last child's corner rounding should not be affected by theAccordionSmmary
's color.Your Environment 🌎
Material-ui Accordion demo example.
The text was updated successfully, but these errors were encountered: