More than 5 years have passed since last update.

Material UI でのテーマ切り替えがReact.StrictModeで動かない

Posted at 2020-09-04

背景

Material-UIでテーマを切り替えられるようにする
を参考にさせていただきテーマ切り替えを実装したのですが上手く動かず *1、
その原因を突き止めるのに時間がかかったので、メモとして残しておきます。

*1 即時反映されず、ページをリロードする必要がありました

題名の通り、<React.StrictMode>が原因でした
ですが、
本番環境では<React.StrictMode>がそもそも機能しないので、実際には何もする必要はありません。
（dev環境でテーマを切り替えるときはリロードする手間があるだけです）

create-react-appで作成した場合、index.tsxは以下のようになっています。

index.tsx

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

この<React.StrictMode>を取り除くと、テーマの切り替えがdev環境でも即時反映されます。