[React.js]styled-componentsの使い方メモ

年末にアップロードしようとしていた記事が、下書きに残っていたので投稿しちゃいます笑

• Componentごとにスコープを区切りたい
• どこでCSSが使われているのかわかりやすくしたい
• 通常のCSS通りの文法で記載したい　など....

そんな時に、styled-componentsがいいとお聞きしたので試してみました。
この記事では、どんなことができるのか紹介していきたいと思います。

styled-componentsとは

styled-componentsはReactコンポーネントとスタイルをまとめて書くことを目的とした新たなライブラリーです。
CSS In JSと言われているやつですね。

styled-componentsの使い方

components/Hello.js

import React from 'react'
import styled from 'styled-components';

const Hello = styled.h1`
  color: #F00;
`

export default function HelloComponent() {
    return (
        <div>
            <Hello>Hello World</Hello>
        </div>
    );
}

Media Queries

utile/Helper.js

import { css, keyframes } from 'styled-components'

export const media = {
    desktop: (...args) => css`
    @media (min-width: 1025px) {
      ${ css(...args)}
    }
  `,
    tablet: (...args) => css`
    @media (max-width: 1024px) {
      ${ css(...args)}
    }
  `,
    phone: (...args) => css`
    @media (max-width: 568px) {
      ${ css(...args)}
    }
  `
}

components/Hello.js

import React from 'react'
import styled from 'styled-components';

const Hello = styled.h1`
  ${media.desktop`color: #F00;`}
  ${media.tablet`color: #0F0;`}
  ${media.phone`color: #00F;`}
`

export default function HelloComponent() {
    return (
        <div>
            <Hello>Hello World</Hello>
        </div>
    );
}