change CSS injection order with MUI styled engine provider (#264)

Co-authored-by: test <test@MacBook-Pro-2.local>

Author: hannahmcg

src/pages/_app.tsx

@@ -14,6 +14,7 @@ import CustomToast from "@/components/CustomToast";
 import Layout from "@/components/layout/Layout";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { StyledEngineProvider } from "@mui/material/styles";
 
 interface CustomPageProps {
   session: Session;
@@ -81,18 +82,20 @@ export default function App({
         <meta name="description" content="Make IEPs easier" />
         <link rel="icon" href="/img/favicon.png" />
       </Head>
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <trpc.Provider client={trpcClient} queryClient={queryClient}>
-          <QueryClientProvider client={queryClient}>
-            <SessionProvider session={pageProps.session}>
-              {errorMessage && <CustomToast errorMessage={errorMessage} />}
-              <Layout>
-                <Component {...pageProps} showErrorToast={toast.error} />
-              </Layout>
-            </SessionProvider>
-          </QueryClientProvider>
-        </trpc.Provider>
-      </LocalizationProvider>
+      <StyledEngineProvider injectFirst>
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <trpc.Provider client={trpcClient} queryClient={queryClient}>
+            <QueryClientProvider client={queryClient}>
+              <SessionProvider session={pageProps.session}>
+                {errorMessage && <CustomToast errorMessage={errorMessage} />}
+                <Layout>
+                  <Component {...pageProps} showErrorToast={toast.error} />
+                </Layout>
+              </SessionProvider>
+            </QueryClientProvider>
+          </trpc.Provider>
+        </LocalizationProvider>
+      </StyledEngineProvider>
     </>
   );
 }