症状

reactでMaterialUIのThemeProviderを使用したとき、下記warnが表示されました。翻訳すると「警告：失敗した小道具タイプ：小道具 `children`は` ThemeProvider`で必須としてマークされていますが、その値は `null`です。」と表示されました。 ThemeProviderの子コンポーネントがnullになっているため、warnが出ているようです。

warn

Warning: Failed prop type: The prop `children` is marked as required in `ThemeProvider`, but its value is `null`.

以下がwarnが出たソースです。

Hoge.jsx

import React,{useState} from "react";
import { ThemeProvider } from '@material-ui/core/styles';
import MaterialUIPrivateHeader from "./component/MaterialUIPrivateHeader";
import MaterialUIGuestHeader from "./component/MaterialUIGuestHeader";
import {headerTheme} from "./theme";
export const Hoge= () => {
  
  const [login,setLogin] = useState(false)
  const [nowLocation,setLocation] = useState("HOME")

  function loginHandle () {
    setLogin(true);
    setLocation("index");
  }
  function logoutHandle () {
    setLogin(false);
    setLocation("logoutIndex");
  }
  function GotoHomeHandle () {
    setLogin(false);
    setLocation("logoutIndex");
  }
  return (
      <button onClick={loginHandle}></button>
      <button onClick={logoutHandle}></button>
      <button onClick={GotoHomeHandle}></button>
      {login}"中です"
      {nowLocation}"ページを開いています"
      <ThemeProvider theme={headerTheme}>
      <div></div>
      {
        nowLocation === "HOME"?
          login?
            <MaterialUIPrivateHeader></MaterialUIPrivateHeader>
          :
            <MaterialUIGuestHeader></MaterialUIGuestHeader>
        :
        //HOME画面の時、何も表示させたくないので、nullにしている
        null
      }
      </ThemeProvider>
  )
}

解決方法

ThemeProviderの要素の下のnullを空のdivタグすることで、warnが出なくなりました。 ThemeProviderの子要素がnullであるため、このようなwarnが出るようで、新設設計だなと思いました。

Hoge.jsx

      <ThemeProvider theme={headerTheme}>
      {
        state.fetchSessionState === REQUEST_STATE.OK?
          state.isLogin?
            <MaterialUIPrivateHeader></MaterialUIPrivateHeader>
          :
            <MaterialUIGuestHeader></MaterialUIGuestHeader>
        :
        <div></div>
      }
      </ThemeProvider>

参考