reactのmaterial uiでclassNameに複数のclassを指定するやり方

reactとreduxでウェブサイトを作成中、material uiを入れてレイアウトを修正しているときのメモ
material ui触りたての初心者や、うっかりやり方忘れてしまった方向けです。
<br >
classNameに複数のclassを指定するやり方　を説明します。

「それ、どういうシチュエーションで起こるんだ」と思うと思うので、
MaterialUIのAppBarコンポーネントのサンプルコードを例にして説明します。
<br >

material uiのApp Barを修正する際、デフォルトだと下図の見た目です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447783/b8838a27-7daf-657e-490c-9162747e60cf.png)

**material ui のApp Bar with buttons のコードのデフォルト**

```javascript
const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

export default function ButtonAppBar() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}
```

<br >
<br >

## お題：NEWSとLOGINの色をピンク色にしたい



App Barの News と LOGIN の色を同じにするために、
titleに色定義を追加する。

```css:
  title: {
    flexGrow: 1,
    color: 'pink',   <=追加
  },
```

<img width="648" alt="スクリーンショット 2019-06-26 15.53.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447783/41a51b2d-e32d-f449-ac17-07657d23b5e1.png">

次にLOGINのclassNameにtitleを指定する

```javascript:
<Button color="inherit" className={classes.title}>Login</Button>
```

<img width="649" alt="スクリーンショット 2019-06-26 15.47.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447783/814b152e-a55a-1815-0b76-bc86922478fd.png">

**色が変わったけど、LOGINが左のほうに寄ってきてしまいました・・・**


titleをLOGINのほうにも指定してしまうと「flexGrow: 1」までLOGINに効いてしまいます

**NEWSとLOGINでclassを分けてみる**

```css:
  title: {
    flexGrow: 1,
    color: 'pink',
  },
  login: {
    color: 'pink',
  }
```

```javascript:
<Button color="inherit" className={classes.login}>Login</Button>
```
<img width="650" alt="スクリーンショット 2019-06-26 15.59.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447783/e9a66d93-e106-1691-8184-eac07003f3d6.png">

**LOGINが右端に戻りました！**


ただ、このままだと「color: 'pink'」の定義がtitleとloginの２つのクラスどちらにも書かないといけない状態になっており、後々のことを考えると共通化したい！

**「titleとlogin」というクラス分けではなくて「titleとheaderColor」というクラス分けにする**

```css:
  title: {
    flexGrow: 1,
  },
  headerColor: {
    color: 'pink',
  }
```

そして、NEWSにはtitleとheaderColorの両方を指定し、LOGINにはheaderColorのみを指定する。

```html:
<Button color="inherit" className={classes.headerColor}>Login</Button>
```

LOGINの方は簡単です。クラス名を変えるだけ。

NEWSの方はtitleとheaderColorの両方を指定するので、ここをどう書くか、やっと本題です。

```html:ダメな例１
<Typography variant="h6" className={classes.title + classes.headerColor}>
 News
</Typography>
```

```html:ダメな例２
<Typography variant="h6" className={classes.title && classes.headerColor}>
 News
</Typography>
```

```html:正解
<Typography variant="h6" className={classes.title + " " + classes.headerColor}>
 News
</Typography>
```

「２つのクラスの間に半角スペースの文字を挟む」が正解でした。

<img width="650" alt="スクリーンショット 2019-06-26 15.59.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447783/e9a66d93-e106-1691-8184-eac07003f3d6.png">


最終的なコードは以下の通りになります。

```javascript
const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
  headerColor: {
    color: 'pink',
  }
}));

export default function ButtonAppBar() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title + " " + classes.headerColor }>
            News
          </Typography>
          <Button color="inherit" className={classes.headerColor}>Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}
```
<br >
フォントサイズの大きさや、色は
"root:"や"menuButton:"、"title:"の下に続けて書けばOKです。
cssファイルでの書き方とは少し違うので注意してください。