@mui/material#StyledEngineProvider TypeScript Examples

function MyApp({ Component, pageProps }: AppProps) {
  /* niceeeee */
  console.log(`
       __            __        __  __             ______    ______  
      /  |          /  |      /  |/  |           /      \  /      \ 
  ____$$ |  ______  $$ |____  $$ |$$/   ______  /$$$$$$  |/$$$$$$  |
 /    $$ | /      \ $$      \ $$ |/  | /      \ $$ |  $$ |$$ \__$$/ 
/$$$$$$$ | $$$$$$  |$$$$$$$  |$$ |$$ | $$$$$$  |$$ |  $$ |$$      \ 
$$ |  $$ | /    $$ |$$ |  $$ |$$ |$$ | /    $$ |$$ |  $$ | $$$$$$  |
$$ \__$$ |/$$$$$$$ |$$ |  $$ |$$ |$$ |/$$$$$$$ |$$ \__$$ |/  \__$$ |
$$    $$ |$$    $$ |$$ |  $$ |$$ |$$ |$$    $$ |$$    $$/ $$    $$/ 
 $$$$$$$/  $$$$$$$/ $$/   $$/ $$/ $$/  $$$$$$$/  $$$$$$/   $$$$$$/  
  `);

  const preferredTheme = usePreferredTheme();

  return (
    <StyledEngineProvider injectFirst>
      <SWRConfig
        value={{
          fetcher,
          refreshInterval: 12000000,
          revalidateOnFocus: false,
        }}
      >
        <ThemeProvider theme={preferredTheme === "dark" ? Theme : LightTheme}>
          <GlobalStyles />
          <Component {...pageProps} />
        </ThemeProvider>
      </SWRConfig>
    </StyledEngineProvider>
  );
}

LegendStyleProvider: React.FC<{
  children: React.ReactNode;
}> = (props) => {
  const { children } = props;

  return (
    // Make sure CSS for MUI generated by `emotion` are injected before our styling code
    // this ensures our styling code can override MUI styles
    // See https://mui.com/guides/interoperability/#css-injection-order-3
    <StyledEngineProvider injectFirst={true}>
      <ThemeProvider theme={LegendCustomMUITheme}>{children}</ThemeProvider>
    </StyledEngineProvider>
  );
}

ContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
    return (
        <StyledEngineProvider injectFirst>
            <ThemeProvider theme={theme}>
                <SnackbarProvider>
                    <AutoConnectProvider>
                        <WalletContextProvider>{children}</WalletContextProvider>
                    </AutoConnectProvider>
                </SnackbarProvider>
            </ThemeProvider>
        </StyledEngineProvider>
    );
}

Theme: FC<{ children: ReactNode }> = ({ children }) => {
    return (
        <StyledEngineProvider injectFirst>
            <ThemeProvider theme={theme}>
                <SnackbarProvider>{children}</SnackbarProvider>
            </ThemeProvider>
        </StyledEngineProvider>
    );
}

export default function App() {
  const {
    networkDevices,
    newNetworkDevices,
    removeDeviceFromNewList,
  } = useNetworkDevices();

  const [device, setDevice] = useState<string | null>('');

  const onDeviceChange = useCallback(
    (dnsDevice: MulticastDnsInformation | null) => {
      const dnsDeviceName = dnsDevice?.name ?? null;
      setDevice(dnsDeviceName);
      if (dnsDevice) {
        const dnsDeviceType = dnsDevice.type.toUpperCase();
        if (dnsDeviceType === 'TX' || dnsDeviceType === 'RX') {
          window.location.href = '#/configurator';
        } else if (dnsDeviceType === 'TXBP' || dnsDeviceType === 'VRX') {
          window.location.href = '#/backpack';
        }
      }
    },
    []
  );

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <ApolloProvider client={client}>
          <AppStateProvider>
            <HashRouter>
              <Routes>
                <Route
                  path="/"
                  element={<Navigate replace to="/configurator" />}
                />
                <Route
                  path="/configurator"
                  element={
                    <ConfiguratorView
                      key="configurator"
                      gitRepository={Config.expressLRSGit}
                      selectedDevice={device}
                      networkDevices={networkDevices}
                      onDeviceChange={onDeviceChange}
                      deviceType={DeviceType.ExpressLRS}
                    />
                  }
                />
                <Route
                  path="/backpack"
                  element={
                    <ConfiguratorView
                      key="backpack"
                      gitRepository={Config.backpackGit}
                      selectedDevice={device}
                      networkDevices={networkDevices}
                      onDeviceChange={onDeviceChange}
                      deviceType={DeviceType.Backpack}
                    />
                  }
                />
                <Route path="/settings" element={<SettingsView />} />
                <Route path="/logs" element={<LogsView />} />
                <Route path="/serial-monitor" element={<SerialMonitorView />} />
                <Route path="/support" element={<SupportView />} />
              </Routes>
            </HashRouter>
            <WifiDeviceNotification
              newNetworkDevices={newNetworkDevices}
              removeDeviceFromNewList={removeDeviceFromNewList}
              onDeviceChange={onDeviceChange}
            />
          </AppStateProvider>
        </ApolloProvider>
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

export default function MyApp(props: MyAppProps) {
    const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
    const [dark, setDark] = useState(false);

    // Set the dark theme on load
    // Both the dark state variable and setDark state function will
    // be passed into the component props
    useEffect(() => {
        // Get the previously saved dark theme choice from cookies
        const cookies = new Cookies();
        const prevDark = cookies.get('dark');

        if (!prevDark) {
            // If it does not exist, use the system dark theme
            const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            setDark(systemDark);
            cookies.set('dark', systemDark, { sameSite: 'strict', path: '/' });
        } else {
            // Otherwise, use the previously set setting
            setDark(prevDark === 'true');
        }
    }, []);

    useEffect(() => {
        const cookies = new Cookies();
        cookies.set('dark', dark, { sameSite: 'strict', path: '/' });
    }, [dark]);

    return (
        <CacheProvider value={emotionCache}>
            <Head>
                <meta name="viewport" content="initial-scale=1, width=device-width" />
                <title>TAMS Club Calendar</title>
                <meta
                    key="description"
                    name="description"
                    content="The TAMS Club Calendar is a fully contained event tracker, club/volunteering database, and general resource center. This is the unofficial club event calendar for the Texas Academy of Mathematics and Science!"
                />
                <meta key="title" property="og:title" content="TAMS Club Calendar" />
                <meta key="type" property="og:type" content="website" />
                <meta key="url" property="og:url" content="https://tams.club/" />
                <meta key="image-0" property="og:image" content="https://cdn.tams.club/social-cover.webp" />
                <meta key="image-1" property="og:image:width" content="1200" />
                <meta key="image-2" property="og:image:height" content="630" />
                <meta key="site-name" property="og:site_name" content="TAMS Club Calendar" />
                <meta key="card" name="twitter:card" content="summary" />
                <meta key="title-1" name="twitter:title" content="TAMS Club Calendar" />
                <meta
                    key="description-1"
                    name="twitter:description"
                    content="The TAMS Club Calendar is a fully contained event tracker, club/volunteering database, and general resource center. This is the unofficial club event calendar for the Texas Academy of Mathematics and Science!"
                />
                <meta key="image-3" name="twitter:image" content="https://cdn.tams.club/social-cover.webp" />

                <meta key="theme-color" name="theme-color" content={theme.palette.primary.main} />
            </Head>
            <StyledEngineProvider injectFirst>
                <ThemeProvider theme={dark ? darkTheme : theme}>
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                        <CssBaseline />
                        <Menu dark={dark} setDark={setDark} />
                        <Component {...pageProps} />
                    </LocalizationProvider>
                </ThemeProvider>
            </StyledEngineProvider>
        </CacheProvider>
    );
}

function App() {
  const [database, setDatabase] = useState(() => new ArtCharDatabase(new DBLocalStorage(localStorage)))
  const dbContextObj = useMemo(() => ({ database, setDatabase }), [database, setDatabase])
  return <React.StrictMode>
    {/* https://mui.com/guides/interoperability/#css-injection-order-2 */}
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <DatabaseContext.Provider value={dbContextObj}>
          <HashRouter basename="/">
            <MatchTitle />
            <Grid container direction="column" minHeight="100vh">
              <Grid item >
                <Header anchor="back-to-top-anchor" />
              </Grid>
              <Container maxWidth="xl" sx={{ px: { xs: 0.5, sm: 1, md: 2 } }}>
                <Suspense fallback={<Skeleton variant="rectangular" sx={{ width: "100%", height: "100%" }} />}>
                  <Routes>
                    <Route index element={<PageHome />} />
                    <Route path="/artifacts" element={<PageArtifact />} />
                    <Route path="/weapons" element={<PageWeapon />} />
                    <Route path="/characters/*"  >
                      <Route index element={<PageCharacter />} />
                      <Route path=":characterKey/*" element={<CharacterDisplay />} />
                    </Route>
                    <Route path="/tools" element={<PageTools />} />
                    <Route path="/setting" element={<PageSettings />} />
                    <Route path="/doc/*" element={<PageDocumentation />} />
                    <Route path="/scanner" element={<PageScanner />} />
                  </Routes>
                </Suspense>
              </Container>
              {/* make sure footer is always at bottom */}
              <Grid item flexGrow={1} />
              <Grid item >
                <Footer />
              </Grid>
            </Grid>
            <ScrollTop >
              <Fab color="secondary" size="small" aria-label="scroll back to top">
                <KeyboardArrowUp />
              </Fab>
            </ScrollTop>
          </HashRouter>
        </DatabaseContext.Provider>
      </ThemeProvider>
    </StyledEngineProvider>
  </React.StrictMode>
}