cannot read properties of null (reading 'scrollTop')_MUI errortroubleshooting2023. 12. 13. 00:00
목차
//에러코드
import { Fade } from "@mui/material";
const FadeIn = ({ children, index }) => {
return (
<Fade in timeout={700} style={{ transitionDelay: 700 * index }}>
{children}
</Fade>
);
};
.
.
.
<FadeIn index={0}>
<AnimatedHighFive isMobile={isMobile} />
<BannerText isMobile={isMobile} />
</FadeIn>
<div>
<FadeIn index={1}>
<LoginForm />
</FadeIn>
</div>
코드는 다소 이상하지만...위 같은 느낌의 코드로 mui fade 를 이용해서 FadeIn 효과를 주는 컴포넌트를 만들고 있었는데 갑자기 에러가 발생했다.
도무지 해결방법을 모르겠어서 여기저기 뒤지다가 한가지 사실을 발견했다.
mui Fade 컴포넌트를 사용한 커스텀 컴포넌트 FadeIn 내부에 있는 컴포넌트를 <div> 태그로 묶어주면 오류가 해결된다.
//해결코드
import { Fade } from "@mui/material";
const FadeIn = ({ children, index }) => {
return (
<Fade in timeout={700} style={{ transitionDelay: 700 * index }}>
{children}
</Fade>
);
};
.
.
.
<FadeIn index={0}>
<div>
<AnimatedHighFive isMobile={isMobile} />
<BannerText isMobile={isMobile} />
</div>
</FadeIn>
<div>
<FadeIn index={1}>
<div>
<LoginForm />
</div>
</FadeIn>
</div>
728x90
반응형
LIST
'troubleshooting' 카테고리의 다른 글
@kdj :: Childev'note
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!