index.js

import React from "react";
import { createRoot } from "react-dom";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";

import "./index.css";
import RootContainer from "./containers/RootContainer";
import { unregister } from "./registerServiceWorker";

import { initFakeApi } from "./libs/fake-api";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#900000",
      light: "#c8412a"
    },
    secondary: { main: "#DDDDDD" },
    error: {
      main: "#f44336",
      light: "#e5c9ca"
    }
  },
  typography: {
    useNextVariants: true
  },
  overrides: {
    MuiListSubheader: {
      root: {
        fontSize: "1rem",
        color: "grey",
        fontWeight: 500
      }
    },
    MuiTypography: {
      subheading: {
        fontSize: "1rem",
        color: "grey",
        fontWeight: 500
      }
    }
  }
});

/**
 * This is where you add the root providers (like react-redux Provider)
 */
const render = Component => {
  createRoot(document.getElementById("root")).render(
    <MuiThemeProvider theme={theme}>
      <Component />
    </MuiThemeProvider>
  );
};

// You may init any API service here

initFakeApi();

render(RootContainer);
unregister();

// if (module.hot) {
//   module.hot.accept("./containers/RootContainer", () => {
//     render(RootContainer);
//   });
// }