【React】styled-componentsを使ってJavaScriptでCSSを書く

f:id:lampler:20210529094111p:plain

純粋なcssはエラーを吐かなかったり、クラス名を重複しないようにしたり、cssのためだけにクラス名をつけたり、と言ったデメリットが存在する。それを解決するstyled-componentsを使っていく。

インストール

$ npm install styled-components エディタにstyled-components用のプラグインを入れておくとよい。プラグインがないとCSSに色がつかなくて見にくい。

基本

変数名 = styled.要素名という文法で書く。その変数はコンポーネントとして利用できる。コンポーネントは要素名で指定した要素になる。今回ならdivが生成される。

import styled from 'styled-components'

const Main = () => {

 const Box = styled.div`
  background-color: aqua;
  width: 50%;
  height: 200px;
 `

  return <Box />
}

export default Main

f:id:lampler:20210529094248p:plain

sytled-componentsによってクラス名がつけられている

f:id:lampler:20210529094509p:plain

複数コンポーネント

import styled from 'styled-components'

const Main = () => {

 const Box = styled.div`
  background-color: aqua;
  width: 50%;
  height: 200px;
 `
 const BoxName = styled.h1`
 background-color: lime;
 `

  return (
    <Box>
      <BoxName> Hello React!</BoxName>
    </Box>
  )
}

export default Main

f:id:lampler:20210529094307p:plain

引数を渡す

引数はコンポーネント作成時にpropsとして受け取ることができる。${}で変数展開をする。直接${props.bgColor}のように記述してもダメで、アロー関数の引数をpropsとする必要がある。`

import styled from 'styled-components'

const Main = () => {

 const Box = styled.div`
  background-color: aqua;
  width: 50%;
  height: 200px;
 `
 const BoxName = styled.h1`
 background-color: ${props => props.bgColor};
 color: ${props => props.color ? props.color : 'black'};
`

  return (
    <Box>
      <BoxName bgColor="red" color="white"> Hello React!</BoxName>
      <BoxName bgColor="lime"> Hello JavaScript!</BoxName>
    </Box>
  )
}

export default Main

f:id:lampler:20210529094323p:plain

ベースコンポーネントを継承する

例えば文字は基本的には赤色だが、場合によっては黒にしたい、フォントを太くしたい、といった時に役に立つ。HTML要素もベースとなるコンポーネントを継承する。例えばベースコンポーネントがdivなら継承して作成されたコンポーネントもdivである。継承のやり方はstyled(baseComponentName)と書くだけ。

import styled from 'styled-components'

const Main = () => {

 const Box = styled.div`
  background-color: aqua;
  width: 50%;
  height: 200px;
 `
  const BoxName = styled.h1`
    color: orangered;
    text-align: center;
  `

// BoxNameコンポーネントを継承。h1タグとcssを継承する。
// cssは上書きすることができる。
  const BoxNameWhite = styled(BoxName)`
    color: black;
    font-weight: bold;
    background-color: lime;
  `

  return (
    <Box>
      <BoxName> Hello React!</BoxName>
      <BoxNameWhite> Hello JavaScript!</BoxNameWhite>
    </Box>
  )
}

export default Main

f:id:lampler:20210529094354p:plain

CSSをネストをさせる

ネストもSCSSのように非常に簡単にできる。

import styled from 'styled-components'

const Main = () => {

 const Box = styled.div`
   h2 {
     color: green;
     :hover {
       text-decoration: underline;
     }
   }
  background-color: aqua;
  width: 50%;
  height: 200px;
 `
  const BoxName = styled.h1`
    color: orangered;
    text-align: center;
  `

  const BoxNameWhite = styled(BoxName)`
    color: black;
    font-weight: bold;
    background-color: lime;
  `

  return (
    <Box>
      <BoxName> Hello React!</BoxName>
      <BoxNameWhite> Hello JavaScript!</BoxNameWhite>
      <h2>Hello TypeScript!</h2>
    </Box>
  )
}

export default Main