Open TrySpace opened 2 years ago
Having same issue
It seems to work great like this :
<Grid container>
<TransitionGroup component={null}>
{listOfData.map((data, key) => (
<Grid
key={key}
component={Collapse}
>
<SomeComponent data={data} />
</Grid>
))}
</TransitionGroup>
</Grid>
@JohannHospice I don't see the Collapse
animation component anywhere, so this won't animate anything I assume?
Having some issue when i use TransitionGroup
and Collapse
in table like
<TableBody>
<TransitionGroup component={null}>
{arr.map(() => <Collapse><TableRow /></Collapse> )}
</TransitionGroup>
</TableBody>
Collapse will insert div
into table, so the table structure and styles been destroyed。
anyone see this can try , but is not a good practice
<TransitionGroup component={null}>
{arr.map(() => <Collapse>
<Table>
<TableBody>
<TableRow />
</TableBody>
</Table>
</Collapse> )}
</TransitionGroup>
@MuLoo Did you find a solution for this problem? I'm having the same problem right now. Thank you
Duplicates
Latest version
Current behavior 😯
I tried to get the below code to work, but wrapping the grid item breaks the layout, because it wraps the children in a
div
, so I addedcomponent={null}
, but then the Grid items don't get stretched to the width:Trying this:
<Collapse key={index} component={Grid}>
doesn't seem to properly inherit the props from the container Grid element.Is there any way for this example so the grid doesn't break?
Expected behavior 🤔
Steps to reproduce 🕹
To reproduce, try the above code
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
``` System: OS: Windows 10 10.0.18363 Binaries: Node: 14.17.6 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.18362.1533.0) npmPackages: @emotion/react: ^11.7.1 => 11.7.1 @emotion/styled: ^11.6.0 => 11.6.0 @mui/base: 5.0.0-alpha.59 @mui/icons-material: ^5.2.1 => 5.2.1 @mui/lab: ^5.0.0-alpha.60 => 5.0.0-alpha.60 @mui/material: ^5.2.3 => 5.2.3 @mui/private-theming: 5.2.3 @mui/styled-engine: 5.2.0 @mui/system: 5.2.3 @mui/types: 7.1.0 @mui/utils: 5.2.3 @types/react: ^17.0.0 => 17.0.37 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ^4.1.2 => 4.5.3 ```