React*Material-UIのCreateStylesで擬似クラスを扱う

概要

何故かMaterial-UIのCreateStyles環境下における擬似クラスの取り扱いの記述が公式にあまりなかった為、どうやって適用すれば良いのか当初詰まりました。

最終的にこうやれば良いのだと発見した為、確認できた対応方法を記載致します

記載方法

sample.tsx

const useStyle = makeStyles(theme =>
  createStyles({
    box1: {
      color: 'black',
      '&:focus': {
        '& + $box2': {
          color: 'red',
        },
      },
    },
    box2: {
      color: 'black',
    },
  }),
);

export function InputStandard() {
  const clsx = useStyle();

  return (
    <div>
      <input className={clsx.box1} />
      <div className={clsx.box2}>box2</div>
    </div>
  );
}

CreateStylesの場合は通常のCSSの記載方法が取れず、例えば隣接要素へfocus時のCSSを適用したい場合は、focus対象のクラス内でネストさせて、そこで $class名とする必要がありました。

なおこの例では$class名としておりますが、$要素名でも行けます。
そもそもStateで管理してJS側で管理するパターンの方が多いかもしれませんが、どなたかの参考になれば幸いです