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;
  
`;