styled-components conditional props doesn't work in Material-ui components - reactjs

Question

I'd like to set fade-in, fade-out animation on the Grid component using Material-UI and styled-components. But it doesn't work and there is an error about the conditional prop. Could you tell me how to do that, please?
import React from "react";
import styled, { keyframes } from "styled-components";
import { Grid } from "#material-ui/core";
const fadeIn = keyframes`
0% {
height: 0
}
50% {
height: 50%;
}
100% {
height: 100%;
}
`;
const fadeOut = keyframes`
0% {
height: 100%
}
50% {
height: 50%;
}
100% {
height: 0;
}
`;
const AnimationGrid = styled(Grid)<{ isOpen: boolean }>`
&& {
visibility: ${props => (props.isOpen ? "visible" : "hidden")};
animation: ${props => (props.isOpen ? fadeIn : fadeOut)}
0.3s linear 0s 1 forwards;
}
`;
type AnimationProps = {
isOpen: boolean;
};
const AnimationComp = ({isOpen}: AnimationProps) => {
return (
<AnimationGrid container isOpen={isOpen}>
<Grid item xs={6}>
Here is left section
</Grid>
<Grid item xs={6}>
Here is right section
</Grid>
</AnimationGrid>
)
}
Also there is a error on console. Fade-in animation is fine but fade-out doesn't work.
Warning: React does not recognize the `isOpen` prop on a DOM element.
If you intentionally want it to appear in the DOM as a custom attribute,
spell it as lowercase `isopen` instead. If you accidentally passed it from a parent component,
remove it from the DOM element.
I'd say isOpen prop doesn't work well. Thank you.

Answer 1

Your question consists of 2 parts, so I'll answer it that way.
For the console error: this behavior has been bugging many people. The reason you see this error, is because the property isOpen is passed to the underlying DOM element. However, DOM elements don't support a boolean attribute isOpen.
To work around this, you can use
styled(({ isOpen, ...props }) => <Grid {...props} />)<{ isOpen: boolean }>`...`
For the animation part: you don't see the fade-out animation, because you set visibility: hidden at the start of it. This way, the element disappears immediately. To get similar behavior to visibility: hidden,
you could add opacity: 0 to your animation at '100%'
and set pointer-events: ${props => props.isOpen ? 'initial' : 'none'}.
Hope this helps!