[React] styled-componentsを使ってみた

# styled-componentsとはなんぞや？
Reactのコンポーネント内で使えるstyleのコンポーネント化のこと。
変数の中にスタイルを登録し、Vuew側で変数名タグとして利用できる。

### styled-componentsインストール

```bash
$ npm install styled-components@^5.0.0 react@^16.8 react-dom@^16.8 react-is@^16.8
```

### 使い方

```jsx
// 変数名の頭文字は大文字
const Container = styled.section`
  background: #fff;
`;

<Container>
    ...内容入れる...
</Container>
```

## レスポンシブにも対応

### styled-media-queryインストール

```bash
$ npm install styled-media-query
```

### 使い方

```js
const Box = styled.div`
  background: black;

  ${media.lessThan("medium")`
    /* screen width is less than 768px (medium) */
    background: red;
  `}

  ${media.between("medium", "large")`
    /* screen width is between 768px (medium) and 1170px (large) */
    background: green;
  `}

  ${media.greaterThan("large")`
    /* screen width is greater than 1170px (large) */
    background: blue;
  `}
`;
```

#### mediaqueryのサイズ
huge: '1440px',
large: '1170px',
medium: '768px',
small: '450px',

## [実践編]styled-components 〜Qiita風コードスニペットつくってみた〜

![スクリーンショット 2020-05-07 23.58.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393193/cdcd15b4-1d78-7451-a548-b9b505db9ece.png)


```jsx:コード全文
import React from 'react';
import styled from 'styled-components';
import media from 'styled-media-query';

// styled-components
const Container = styled.section`
  padding: 2em;
  background: #fff;
`;
const Title = styled.h3`
  font-size: 20px;
  text-align: left;
  color: #00c400;
`;
const Code = styled.section`
  font-size: 18px;
  color: #e3e3e3;
  margin: 0 0 20px 0;
  padding: 2em;
  background: #364549;
  ${media.lessThan("medium")`
    padding: 2em 1em 1em;
  `}
`;
const CodeLast = styled.section`
  font-size: 18px;
  color: #e3e3e3;
  margin: 0;
  padding: 2em;
  background: #364549;
  ${media.lessThan("medium")`
    padding: 2em 1em 1em;
  `}
`;
const CodeDatail = styled.div`
  font-size: 18px;
  text-align: center;
  line-height: 18px;
  color: #eee;
  width: 10%;
  margin: 0;
  padding: 5px 0 0 0;
  background: #777;
  bottom: 36px;
  position: relative;

  ${media.lessThan("medium")`
    width: 30%;
  `}
`;

const Cy = styled.span`
  color: #ebd247;
`;
const Cg = styled.span`
  color: #8bdf4c;
`;
const Cb = styled.span`
  color: #41b7d7;
`;
const Cr = styled.span`
  color: #ff8095;
`;
const Cgr = styled.span`
  color: #9dabae;
`;
const OneIndent = styled.p`
  margin: 0 0 0 30px;
`;

const Styled = () => {
    return(
        <React.Fragment>
            <h2>UI Components</h2>
            <Container>
              <Title>1. styled-components[USAGE]</Title>
              <Code>
                <CodeDatail>bash</CodeDatail>
                $ npm install styled-components@^5.0.0 react@^16.8 react-dom@^16.8 react-is@^16.8
              </Code>
              <CodeLast>
                <CodeDatail>jsx</CodeDatail>
                <p><Cgr>&#047;&#047; styled-components import</Cgr></p>
                <p><Cy>import</Cy> <Cg>styled</Cg> <Cy>from</Cy> <Cb>'styled-components'</Cb>;</p>
                <p><Cgr>&#047;&#047; styling</Cgr></p>
                <p><Cy>const</Cy> <Cg>Container</Cg> <Cr>=</Cr> <Cg>styled</Cg>.<Cg>section</Cg><Cb>`</Cb></p>
                <OneIndent><Cg>padding</Cg>: <Cb>2em</Cb>;</OneIndent>
                <OneIndent><Cg>background</Cg>: <Cb>#fff</Cb>;</OneIndent>
                <p><Cb>`</Cb>;</p>
                <p><Cgr>&#047;&#047; render</Cgr></p>
                <p>&lt;<Cg>Container</Cg>&gt;...内容...&lt;/<Cg>Container</Cg>&gt;</p>
              </CodeLast>
            </Container>
        </React.Fragment>
    );
}

export default Styled;
```

# 使ってみた感想
そのコンポーネント内でスタイル付けしたい場合などに利用すると
他のコンポーネントに干渉しないので、部品として作れるのがメリットだと思いました。
スタイルの使い方としては
全体のCSSは「App.css」などに記述、
個別に切り出したいときは「styled-components」を利用するのがいいかなと個人的には思ってます。
もし、使い方として間違っていたら、ご意見お願いします。