remove styled component ThemeProvider

src/pages/_app.tsx

@@ -1,5 +1,4 @@
 import React, { createContext, useEffect, useRef, useState } from 'react';
-import styled, { ThemeProvider as SThemeProvider } from 'styled-components';
 import AppNavbar from 'components/Navbar/app';
 import constants from 'utils/strings/constants';
 import { useRouter } from 'next/router';
@@ -17,7 +16,7 @@ import Head from 'next/head';
 import { logUploadInfo } from 'utils/upload';
 import LoadingBar from 'react-top-loading-bar';
 import DialogBox from 'components/DialogBox';
-import { ThemeProvider as MThemeProvider } from '@mui/material/styles';
+import { styled, ThemeProvider } from '@mui/material/styles';
 import darkThemeOptions from 'themes/darkThemeOptions';
 import { CssBaseline } from '@mui/material';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -29,7 +28,7 @@ import {
 } from 'services/userService';
 import { CustomError } from 'utils/error';
 
-export const MessageContainer = styled.div`
+export const MessageContainer = styled('div')`
     background-color: #111;
     padding: 0;
     font-size: 14px;
@@ -232,8 +231,7 @@ export default function App({ Component, err }) {
                 />
             </Head>
 
-            <MThemeProvider theme={darkThemeOptions}>
-                <SThemeProvider theme={darkThemeOptions}>
+            <ThemeProvider theme={darkThemeOptions}>
                 <CssBaseline />
                 {showNavbar && <AppNavbar />}
                 <MessageContainer>
@@ -242,9 +240,7 @@ export default function App({ Component, err }) {
                 {sharedFiles &&
                     (router.pathname === '/gallery' ? (
                         <MessageContainer>
-                                {constants.FILES_TO_BE_UPLOADED(
-                                    sharedFiles.length
-                                )}
+                            {constants.FILES_TO_BE_UPLOADED(sharedFiles.length)}
                         </MessageContainer>
                     ) : (
                         <MessageContainer>
@@ -290,8 +286,7 @@ export default function App({ Component, err }) {
                         <Component err={err} setLoading={setLoading} />
                     )}
                 </AppContext.Provider>
-                </SThemeProvider>
-            </MThemeProvider>
+            </ThemeProvider>
         </>
     );
 }

src/types/theme/styled.d.ts

@@ -1,7 +0,0 @@
-// styled.d.ts
-import 'styled-components';
-import { Theme } from '@mui/material';
-
-declare module 'styled-components' {
-    export interface DefaultTheme extends Theme {}
-}