問題の状況

以下に示すように、NavファイルのNavLogoは、拡張形式でwidthを設定するためにNavをインポートしようとしますが、適用されません.

//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}
    />
  );
}