removed app.css

src/App.css

@@ -1,17 +0,0 @@
-.App {
-  text-align: center;
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.App-header {
-  min-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}

src/App.js

@@ -1,13 +1,10 @@
 import React, { Suspense } from "react";
-import "./App.css";
 import Main from "./components/layout/Main";
 
 function App() {
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <div className="App">
-        <Main />
-      </div>
+      <Main />
     </Suspense>
   );
 }

src/components/layout/Main.js

@@ -1,15 +1,37 @@
 import React from "react";
 import ApplicationStepper from "./stepper/ApplicationStepper";
 import Switcher from "./Switcher";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+  app: {
+    textAlign: "center",
+    backgroundColor: "#282c34",
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column"
+  },
+  content: {
+    minHeight: "80vh",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "calc(10px + 2vmin)",
+    color: "white"
+  }
+}));
 
 const Main = () => {
+  const classes = useStyles();
+
   return (
-    <>
+    <div className={classes.app}>
       <ApplicationStepper />
-      <header className="App-header">
+      <header className={classes.content}>
         <Switcher />
       </header>
-    </>
+    </div>
   );
 };