React+Material UIで、スタイルをJS in CSSで書く方法まとめ

2021年6月8日
none
JavaScript, JS in CSS, MakeStyles, Material UI, React

株式会社ユニフェイスの大竹です。

製造実行システムIB-MesのWebアプリ版・IB-Mes SaaSのフロントエンドを担当しています。

IB-Mes SaaSではReact,TypescriptとMaterial UIを使っているのですが、毎回JS in CSSの書き方に詰まってしまうので、まとめました

以下の内容を読んで、

わかること:JS in CSSを利用したCSSの書き方
わからないこと:上記以外の時のCSSの書き方

記事を書いているときの各種ツールのバージョンは、Material UI v4、React 17.0.2です
React 16.8で追加されたフック(Hook)を利用しています

1 グローバルにCSSを当てる
2 子要素を指定してスタイルを当てる
3 直下の階層の子要素を指定する
4 疑似クラスの指定

グローバルにCSSを当てる

グローバルにCSSを当てるときは、’@global’を使います
以下の例では、MuiPickersSlideTransition-transitionContainerというクラスに、グローバルにCSSを適用しています

参考:https://stackoverflow.com/questions/58755118/global-styles-with-react-and-material-ui

const useStyles = makeStyles((theme) => ({
  "@global": {
    ".MuiPickersSlideTransition-transitionContainer.MuiPickersCalendarHeader-transitionContainer":
      {
        order: -1,
      },
    ".MuiTypography-root.MuiTypography-body1.MuiTypography-alignCenter": {
      fontWeight: "bold",
    },
  },
}))

子要素を指定してスタイルを当てる

ol(番号付き箇条書き)の先頭を(1)のようなカッコつきの表記にするCSSで説明します
olの子要素のliを指定する時は、ol:{}の中に”& li”:{}を入れます
疑似要素を指定する時は、”&::before”のように書きます
カッコつきの表記にするポイントは、contentに`"(" counter(cnt) ") "`を指定することです

参考:https://www.websuccess.jp/blog/archives/2711/
の技調整する①の内容をJS in CSSに書き換えました

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    ol: {
      paddingLeft: 0,
      marginLeft: theme.spacing(4),
      "& li": {
        listStyleType: "none",
        counterIncrement: "cnt",
        display: "block",
        position: "relative",
        "&::before": {
          content: `"(" counter(cnt) ") "`,
          marginLeft: -theme.spacing(4),
          width: theme.spacing(5),
          position: "absolute",
          top: 0,
          left: 0,
        },
      },
    },
  })
)

スタイルを当てる部分では以下のように指定します

const classes = useStyles()

<ol className={classes.ol}>
  <li>hoge</li>
  <li>bra</li>
</ol>

直下の階層の子要素を指定する

直下の階層の子要素を指定する時は、子セレクタ > を利用することができます

const classes = makeStyles((theme: Theme) =>
  createStyles({
    editButton: {
      flexGrow: 1,
      textAlign: "center",
      "& > *": {
        margin: theme.spacing(1),
      },
    },
  })
)

疑似クラスの指定

疑似クラスの指定は、:(セミコロン1個)を利用します
例えばホバー時の処理を書く場合は、”&:hover”となります
以下のように指定すると、マウスカーソルを載せた時だけ背景の色が変わります。

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    icon: {
      "&:hover": {
        background: theme.palette.action.active,
      },
    },
  })
)

もし間違いなどありましたら、ご指導ご鞭撻のほどよろしくお願いします
ReactとMaterial UIなどについて勉強中なので、お手柔らかにお願いします