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

<!-- wp:paragraph -->
<p>株式会社ユニフェイスの大竹です。</p>
<!-- /wp:paragraph -->

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

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

<!-- wp:paragraph -->
<p>以下の内容を読んで、</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>わかること:JS in CSSを利用したCSSの書き方</li><li>わからないこと:上記以外の時のCSSの書き方</li></ul>
<!-- /wp:list -->

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

<!-- wp:heading {"level":3} -->
<h3>グローバルにCSSを当てる</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>グローバルにCSSを当てるときは、'@global'を使います<br>以下の例では、MuiPickersSlideTransition-transitionContainerというクラスに、グローバルにCSSを適用しています</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>参考:<a href="https://stackoverflow.com/questions/58755118/global-styles-with-react-and-material-ui">https://stackoverflow.com/questions/58755118/global-styles-with-react-and-material-ui</a></p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">const useStyles = makeStyles((theme) => ({
  "@global": {
    ".MuiPickersSlideTransition-transitionContainer.MuiPickersCalendarHeader-transitionContainer":
      {
        order: -1,
      },
    ".MuiTypography-root.MuiTypography-body1.MuiTypography-alignCenter": {
      fontWeight: "bold",
    },
  },
}))</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading {"level":3} -->
<h3>子要素を指定してスタイルを当てる</h3>
<!-- /wp:heading -->

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

<!-- wp:paragraph -->
<p>参考:<a href="https://www.websuccess.jp/blog/archives/2711/">https://www.websuccess.jp/blog/archives/2711/</a><br>の技 調整する①の内容をJS in CSSに書き換えました</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>スタイルを当てる部分では以下のように指定します</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const classes = useStyles()

&lt;ol className={classes.ol}>
  &lt;li>hoge&lt;/li>
  &lt;li>bra&lt;/li>
&lt;/ol></code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3>直下の階層の子要素を指定する</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>直下の階層の子要素を指定する時は、子セレクタ &gt; を利用することができます</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const classes = makeStyles((theme: Theme) =>
  createStyles({
    editButton: {
      flexGrow: 1,
      textAlign: "center",
      "&amp; > *": {
        margin: theme.spacing(1),
      },
    },
  })
)</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3>疑似クラスの指定</h3>
<!-- /wp:heading -->

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

<!-- wp:code -->
<pre class="wp-block-code"><code>const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    icon: {
      "&amp;:hover": {
        background: theme.palette.action.active,
      },
    },
  })
)</code></pre>
<!-- /wp:code -->

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