아래와 같이, Nav 파일의 NavLogo는 Nav를 import해서 extending 형식으로 width를 설정하려고 하지만, 적용 안됨
//Logo.js export default function Logo() { return ( <img src="https://fetching.co.kr/web/upload/category/logo/24a18e42ca3f7b96048929d4f77012dd_3_top.jpg" alt="logo" /> ); }
//Nav.js export default function Nav() { return ( <NavWrapper> <NavLogo /> <SearchBar /> <NavIcons> <FaRegHeart /> <FaShoppingBasket /> </NavIcons> </NavWrapper> ); } const NavWrapper = styled.div` width: 90%; margin: auto; `; const NavLogo = styled(Logo)` width: 100px; `;
공식문서를 살펴본 결과, 아래와 같이 className을 넣어야 적용된다고 나와있음
Logo.js 파일을 아래와 같이 수정한 결과 작동 확인!export default function Logo({ className }) { return ( <img src="https://fetching.co.kr/web/upload/category/logo/24a18e42ca3f7b96048929d4f77012dd_3_top.jpg" alt="logo" className={className} /> ); }