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

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


classNameに複数のclassを指定するやり方　を説明します。

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

material uiのApp Barを修正する際、デフォルトだと下図の見た目です。

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

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>
  );
}

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

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

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

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

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

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

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

NEWSとLOGINでclassを分けてみる

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

<Button color="inherit" className={classes.login}>Login</Button>

LOGINが右端に戻りました！

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

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

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

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

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

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

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

ダメな例１

<Typography variant="h6" className={classes.title + classes.headerColor}>
 News
</Typography>

ダメな例２

<Typography variant="h6" className={classes.title && classes.headerColor}>
 News
</Typography>

正解

<Typography variant="h6" className={classes.title + " " + classes.headerColor}>
 News
</Typography>

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

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

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>
  );
}

フォントサイズの大きさや、色は "root:"や"menuButton:"、"title:"の下に続けて書けばOKです。 cssファイルでの書き方とは少し違うので注意してください。