[react:day2] コンポーネントにスタイルを


## 環境
[react:day1.2と同じ](https://qiita.com/ozepon/items/29b6c3b240129c903eb1)

## reactでスタイルを書く方法
いろいろ見てみたが特に「これだ！」っていうものも無く、
普通にCSS書いてもいいかな〜なんて思っちゃったりもした。
が、
[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)はreact nativeでも使えるみたいなのでこれで書いてみたいと思う。

## styled-componentsをinstall

```bash
npm install --save styled-components
```

vs codeにstyled-componentsのsyntaxがあるので[こちら](https://github.com/styled-components/vscode-styled-components)もインストール
![スクリーンショット 2018-01-31 14.56.48.png](https://qiita-image-store.s3.amazonaws.com/0/24013/4b4debd1-db00-aebb-01ed-241e9df42a1f.png "スクリーンショット 2018-01-31 14.56.48.png")

## MemberImageにスタイルを当ててみる

```member-image.js
import React, { Component } from 'react';

// styled-componetsをimport
import styled from 'styled-components';

// styleを定義
const Img = styled.img`
  height: 5rem;
  width: 5rem;
`;
export default class MemberImage extends Component {
  render() {
    return(
      <Img src={this.props.memberImage}/>
    );
  }
}
```

こんな感じになる
![スクリーンショット 2018-01-31 15.33.39.png](https://qiita-image-store.s3.amazonaws.com/0/24013/257db79f-150d-76bf-8f96-39c13522ece4.png "スクリーンショット 2018-01-31 15.33.39.png")

生成されたHTMLを見ると２つのクラスがついている
![スクリーンショット 2018-01-31 15.34.40.png](https://qiita-image-store.s3.amazonaws.com/0/24013/c30f0426-a0ab-025b-62d1-5e9a436af1b0.png "スクリーンショット 2018-01-31 15.34.40.png")

styled.img を styled.div に変えてみた。


```member-image.js
import React, { Component } from 'react';

// styled-componetsをimport
import styled from 'styled-components';

// styleを定義
// const Img = styled.img`
const Img = styled.div`
  height: 5rem;
  width: 5rem;
`;
export default class MemberImage extends Component {
  render() {
    return(
      <Img src={this.props.memberImage}/>
    );
  }
}
```

生成されるのはdivになる
![スクリーンショット 2018-01-31 15.39.57.png](https://qiita-image-store.s3.amazonaws.com/0/24013/2f836942-4446-5c0d-8184-629625aecd99.png "スクリーンショット 2018-01-31 15.39.57.png")

これでなんとなくイメージができた。

## propsの値でスタイルを変えてみる

```member.js
import React, { Component } from 'react';
import styled from 'styled-components';
import MemberName from './member-name';
import MemberImage from './member-image';

// style
const Wrap = styled.div`
  /* 偶数奇数で背景色を変更 */
  background: ${ props => (props.rowNumber % 2 === 0) ? 'aliceblue':'white'};
`
export default class Member extends Component {
  render() {
    return(
      <div>
        {this.props.memberList.map((member, index) => {
          return (
            // rowNumberを渡す
            <Wrap key={index} rowNumber={index}>
              <MemberName memberName={member.name}/>
              <MemberImage memberImage={member.image}/>
            </Wrap>
          );
        })}
      </div>
    );
  }
}
```

とりあえずやりたい事はできた
![スクリーンショット 2018-01-31 16.14.13.png](https://qiita-image-store.s3.amazonaws.com/0/24013/31baa094-24ac-f389-192b-0eb34b7d5b03.png "スクリーンショット 2018-01-31 16.14.13.png")

しかし、まだよくわかってないところ
 - propsのスコープ
 - styledの中で``` ${ props => (props){} ``` こう書かないと何故参照できないのか

## propsのスコープ
Wrapに設定したrowNumberをMemberNameに書いてみて参照できるかテスト

```member.js
import React, { Component } from 'react';
import styled from 'styled-components';
import MemberName from './member-name';
import MemberImage from './member-image';

// style
const Wrap = styled.div`
  /* 偶数奇数で背景色を変更 */
  background: ${ props => (props.rowNumber % 2 === 0) ? 'aliceblue':'white'};
`
export default class Member extends Component {
  render() {
    return(
      <div>
        {this.props.memberList.map((member, index) => {
          return (
            
            <Wrap key={index}>
              {/* MemberNameにrowNumberをセット */}
              <MemberName  rowNumber={index} memberName={member.name}/>
              <MemberImage memberImage={member.image}/>
            </Wrap>
          );
        })}
      </div>
    );
  }
}
```

こう表示される。
![スクリーンショット 2018-01-31 16.18.41.png](https://qiita-image-store.s3.amazonaws.com/0/24013/501298bb-2600-63d5-4043-bddc58705159.png "スクリーンショット 2018-01-31 16.18.41.png")

他のタグに書いても値は引き渡されないようだ。

##styledの中で``` ${ props => (props){} ``` こう書かないと何故参照できないのか

これはそういう事だとして次に進もうと思う。

## media-queryを使ってstyleを変更してみる

とりあえず現状はこんな感じ

```member.js
import React, { Component } from 'react';
import styled from 'styled-components';
import MemberName from './member-name';
import MemberImage from './member-image';

// style
const Wrap = styled.div`
  /* 偶数奇数で背景色を変更 */
  background: ${ props => (props.rowNumber % 2 === 0) ? 'aliceblue':'white'};
  display: flex;
  justify-content: center;
`
const MemberGroup = styled.div`
  display:flex;
  flex-direction: column;
`
export default class Member extends Component {
  render() {
    return(
      <div>
        {this.props.memberList.map((member, index) => {
          return (
            <Wrap key={index} rowNumber={index} >
              <MemberGroup>
                <MemberName　memberName={member.name}/>
                <MemberImage memberImage={member.image}/>
              </MemberGroup>
            </Wrap>
          );
        })}
      </div>
    );
  }
}
```

キャプチャ

![スクリーンショット 2018-01-31 16.49.21.png](https://qiita-image-store.s3.amazonaws.com/0/24013/f5e9d8d7-0355-72bf-33f4-5638ad3ef84f.png "スクリーンショット 2018-01-31 16.49.21.png")

まずはcolorだけ変えてみる

```member.js
import React, { Component } from 'react';
import styled from 'styled-components';
import MemberName from './member-name';
import MemberImage from './member-image';

// style
const Wrap = styled.div`
  /* 偶数奇数で背景色を変更 */
  background: ${ props => (props.rowNumber % 2 === 0) ? 'aliceblue':'white'};
  display: flex;
  justify-content: center;

  /* media query */
  @media (min-width: 720px){
    color:red;
  }
`
const MemberGroup = styled.div`
  display:flex;
  flex-direction: column;
`
export default class Member extends Component {
  render() {
    return(
      <div>
        {this.props.memberList.map((member, index) => {
          return (
            <Wrap key={index} rowNumber={index} >
              <MemberGroup>
                <MemberName　memberName={member.name}/>
                <MemberImage memberImage={member.image}/>
              </MemberGroup>
            </Wrap>
          );
        })}
      </div>
    );
  }
}
```

OK
![medi.gif](https://qiita-image-store.s3.amazonaws.com/0/24013/6e3eeb08-c672-ae0b-efd3-a9eca0a10fe2.gif "medi.gif")

次にwidthで判定して写真の並びを row/column 切り替える

```member.js
import React, { Component } from 'react';
import styled from 'styled-components';
import MemberName from './member-name';
import MemberImage from './member-image';

// style
const FlexWrap = styled.div`
  display: flex;
  flex-direction: column;
  /* media query */
  @media (min-width: 720px){
    flex-direction: row;
    justify-content: space-evenly;
  }
`
const Wrap = styled.div`
  /* 偶数奇数で背景色を変更 */
  background: ${ props => (props.rowNumber % 2 === 0) ? 'aliceblue':'white'};
  display: flex;
  justify-content: center;
`
const MemberGroup = styled.div`
  display:flex;
  flex-direction: column;
`
export default class Member extends Component {
  render() {
    return(
      <FlexWrap>
        {this.props.memberList.map((member, index) => {
          return (
            <Wrap key={index} rowNumber={index} >
              <MemberGroup>
                <MemberName　memberName={member.name}/>
                <MemberImage memberImage={member.image}/>
              </MemberGroup>
            </Wrap>
          );
        })}
      </FlexWrap>
    );
  }
}
```

想定通り動く
![medi2.gif](https://qiita-image-store.s3.amazonaws.com/0/24013/7d44882f-9ec9-f76a-e3f5-438a673f693f.gif "medi2.gif")


スタイルはとりあえずこれでいいかな。
さて、次は何しよう🍪