他の構成部品をインポートして、拡張スタイル-コンポーネントを作成するときにスタイルを適用しません.
3547 ワード
問題の状況
以下に示すように、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}
/>
);
}
Reference
この問題について(他の構成部品をインポートして、拡張スタイル-コンポーネントを作成するときにスタイルを適用しません.), 我々は、より多くの情報をここで見つけました
https://velog.io/@mementomori/다른-컴포넌트를-가져와서-extending-styled-component-작성-시-스타일-적용-안되는-경우
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
//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}
/>
);
}
Reference
この問題について(他の構成部品をインポートして、拡張スタイル-コンポーネントを作成するときにスタイルを適用しません.), 我々は、より多くの情報をここで見つけました https://velog.io/@mementomori/다른-컴포넌트를-가져와서-extending-styled-component-작성-시-스타일-적용-안되는-경우テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol