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

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

製造実行システム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)を利用しています

グローバルに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などについて勉強中なので、お手柔らかにお願いします

>

株式会社ユニフェイスは製造業向けのシステムを開発している会社です。
紙運用からの脱却やIoTデバイスなどを利用した実績自動収集、リアルタイムな情報共有など製造現場の最適化をご提案しています。


株式会社ユニフェイス
製造実行システムとは?
製造実行システムIB-Mes
見える化システムIB-Skin