Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Accordion] Remove display:flex from AccordionDetails

See original GitHub issue

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

Summary 💡

For component packages/material-ui/src/AccordionDetails/AccordionDetails.js. https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/AccordionDetails/AccordionDetails.js#L9

I don’t see any reason of setting a display: flex onto the root div. The display: block style (on top of the fact that it does not require explicit setting) might even be preferred.

Unfortunately this is a breaking change 😕.

Examples 🌈

Motivation 🔦

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:18 (17 by maintainers)

Top GitHub Comments

2reactions

crorafcommented, Aug 14, 2021

@tielushko This is not a change for v4 of material-ui. It’s included in v5.

2reactions

tielushkocommented, Aug 12, 2021

Using v4.11.4 and the accordion details are still displaying as a flex… Not sure whether this the fix was added or not.

Sandbox with example

Top Results From Across the Web

[Accordion] Remove display:flex from AccordionDetails #22456

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

How can I fix the positioning of this AccordionDetails using ...

For future readers of this answer, AccordionDetails is no longer display: flex by default: github.com/mui/material-ui/pull/22809. So you also ...

AccordionDetails API - Material UI - MUI

API reference docs for the React AccordionDetails component. Learn about the props, CSS, and other APIs of this exported module.

@material-ui/core Accordion JavaScript Examples

This page shows JavaScript code examples of @material-ui/core Accordion. ... </AccordionSummary> <AccordionDetails className={classes.root}> <FormControl ...

React (forked) - StackBlitz

import AccordionDetails from '@mui/material/. AccordionDetails'; ... const AccordionDetails = styled.div`. display : flex;. align-items : center;.