React × styled component
6362 ワード
styled componentの使い方
インストール
webstormのターミナルで入力
'npm install styled-components'
TypeScriptも使う時は型定義ファイルもインストールします。
‘npm install --save-dev styled-components @types/styled-components‘
使い方
import heroImg from "../assets/images/hero.png"
import question1Img from "../assets/images/question1.png"
export const Content = () =>{
// not_started: 初期画面, in_progress: 診断中, finished: 診断結果
const [process,setProcess] = useState('not_started'); // 'in_progress', 'finished'
const ContentImg = () => {
switch (process) {
case "not_started":
return heroImg;
case "in_progress":
return question1Img;
case "finished":
return null;
default:
return null;
}
}
return(
<div>
<ContentStyle backgroundImg={ContentImg()}>
{ContentBody()}
</ContentStyle>
</div>
);
const ContentStyle = styled.div`
background: url(${props => props.backgroundImg}) no-repeat top /cover;
`;
Author And Source
この問題について(React × styled component), 我々は、より多くの情報をここで見つけました https://zenn.dev/monstera/articles/031b87f0a743ce著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol