React.js material-uiでアニメーション@keyframesを設定する方法

自分が設定する時に資料を掘って少し面倒だったので、メモとして残しておきます。
選定としてReact.jsのフレームワークmaterial-uiを使っています。

まずは下記コンポーネントを作成します。
今回はこの<Box className={ classes.circle } />をくるくる回転させるアニメーションを作成します。

import { Box } from '@material-ui/core';

export default function SpliCircle(props) {
  const classes = useStyles(); // ここは後述します
  return (
		<Box>
			<Box className={ classes.circle } />
		</Box>
  );
}

cssの設定

結果はこちらです。

import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles((theme) => ({
	circle: {
		width: 100,
		height: 100,
		backgroundColor: theme.palette.primary.main,
		animation: `$spin infinite 200s`
	},
	'@keyframes spin': {
		'0%': { transform: 'rotate(0deg)' },
		'100%': { transform: 'rotate(360deg)' }
	}
}));

まずはアニメーションさせたい対象に

animation: `${animation名} infinite 200s` 

と ${animation名}と書きます。(他は基本のcssと同じ書き方です)
その後アニメーションの詳細はクラス定義と同じように書きます。

'@keyframes {animation名}': {
  {animationの内容}
}

これだけです。
書き方が分かれば難しいことは一切ありませんので、これだけ覚えれば困りません。

ちなみに

<stle=''>タグにアニメーション用cssを書き込んでしまう、という手もありますが、material-uiではそれを推奨していません。
（まぁmakeStylesを作っているんですから当然こっちを使ってほしいに決まっていますよね。＾＾；）
一応そのように記述しておきます。

「書き方ちゃうよー」などございましたら、ご指摘お待ちしておりますm(_ _)m