@material-ui/core#CssBaseline JavaScript Examples

function App() {
  const classes = useStyles();

  return (
    <HashRouter>
      <CssBaseline />
      <div className={classes.root}>
        <SideNav />
        <Routes />
      </div>
    </HashRouter>
  );
}

ThemedApp = () => {
  const globalState = useContext(store)
  const { prefersDarkMode } = (globalState && globalState.state) || {}

  const theme = React.useMemo(
    () =>
      createMuiTheme({
        palette: {
          type: prefersDarkMode ? 'dark' : 'light',
          primary: {
            main: '#00275B',
          },
          secondary: {
            main: '#FF5761',
          },
        },
      }),
    [prefersDarkMode]
  )

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Suspense fallback='Loading...'>
        <Navbar />
        <Content>
          <Router />
        </Content>
        <div style={{ marginBottom: '46px' }} />
        <Footer />
      </Suspense>
    </ThemeProvider>
  )
}

function App() {
    useEffect(() => {
        const server_side_css = document.querySelector("#jss-server-side");
        if (server_side_css) {
            server_side_css.parentElement.removeChild(server_side_css);
        }
    }, []);

    return (
        <>
            <CssBaseline>
                <Container fixed>
                    <Switch>
                        <Redirect exact path="/" to="/algo" />

                        <Route
                            exact
                            path="/:page(algo|ds)"
                            render={(props) => <Algo {...props} />}
                        />

                        <Route
                            exact
                            path="/open"
                            render={(props) => <OpenFolder {...props} />}
                        />
                    </Switch>
                </Container>
            </CssBaseline>
        </>
    );
}

Providers = ({ children }) => {
  const { i18n } = useTranslation();
  const theme = useTheme({ language: i18n.language });

  return (
    <React.StrictMode>
      <BrowserRouter>
        <ThemeProvider theme={theme}>
          <StyledComponentsThemeProvider theme={theme}>
            <QuantileProvider>
              <CssBaseline />
              {children}
            </QuantileProvider>
          </StyledComponentsThemeProvider>
        </ThemeProvider>
      </BrowserRouter>
    </React.StrictMode>
  );
}

export default function LTISetup () {
  const classes = useStyles()
  // var auth = useSelector(state => state.authReducer)

  useEffect(() => {
    document.title = 'LTI - eSim'
    // eslint-disable-next-line
  }, [])

  return (
    <div className={classes.root}>
      <CssBaseline />

      {/* Submission page header and left side pane */}
      <Layout resToolbar={<Header />} sidebar={<DashboardSidebar />} />

      <LayoutMain>
        <div className={classes.toolbar} />
        <Switch>
          <Route exact path="/dashboard" component={DashboardHome} />
          <Route exact path="/dashboard/profile" />
          <Route
            exact
            path="/dashboard/schematics"
            component={SchematicsList}
          />
        </Switch>
        <LTIConfig />
      </LayoutMain>
    </div>
  )
}

AdminApp = () => {
  const classes = useStyles();
  return (
    <Box display="flex" width={1} height="100%">
      <CssBaseline />
      <Drawer
        open
        variant="persistent"
        classes={{ paper: classes.drawer }}
        PaperProps={{ elevation: 4 }}
      >
        <Box className={classes.logo} display="flex" alignItems="center">
          <NavLink to="/">{logo}</NavLink>
        </Box>
        <AdminNavigation />
      </Drawer>
      <Box width={1} className={classes.main}>
        <AppBar position="relative" elevation={2}>
          <Toolbar />
        </AppBar>
        <Container className={classes.content}>
          <Box mt={2}>
            <Switch>
              <Route path="/admin/dashboard" component={DashboardPage} />
              <Route path="/admin/applications" component={ApplicationPage} />
            </Switch>
          </Box>
        </Container>
      </Box>
    </Box>
  );
}

App = () => {
  const darkMode = useSelector(({ Theme }) => Theme.darkMode);
  const themeMode = darkMode ? DARK_THEME : LIGHT_THEME;
  const themeValue = theme(themeMode);
  const classes = useStyles();
  const dispatch = useDispatch();
  const validatorMethods = useDeleteValidation(
    getAllProductsDataForDeleteValidation
  );
  const token = getFromLocalStorage(LOCAL_STORAGE.AUTH_ACCESS_TOKEN);

  useEffect(() => {
    dispatch(checkUserByToken());

    if (token) {
      dispatch(getEmailQuestionsPendingCount());
    }
  }, []);

  return (
    <ThemeProvider theme={themeValue}>
      <CssBaseline>
        <div className={classes.root}>
          <ConnectedRouter history={history}>
            <Routes validatorMethods={validatorMethods} />
          </ConnectedRouter>
        </div>
      </CssBaseline>
    </ThemeProvider>
  );
}

export default function MyApp({ Component, pageProps }) {

  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
  const [theme, setTheme] = useState(
    prefersDarkMode ? darkTheme : lightTheme
  )

  useEffect(() => {
    setTheme(prefersDarkMode ? darkTheme : lightTheme)
  }, [prefersDarkMode])

  useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>Kaustubh Odak</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>
      <MuiThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} setTheme={setTheme}/>
      </MuiThemeProvider>
    </React.Fragment>
  );
}

function App() {
  const classes = useStyles();

  return (
    <HashRouter>
      <CssBaseline />
      <div className={classes.root}>
        <SideNav />
        <Routes />
      </div>
    </HashRouter>
  );
}

// import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  // Wrap project in auth0 for authentication and authorization
  <Auth0Provider
    domain={config.domain}
    client_id={config.clientId}
    redirect_uri={window.location.origin}
    audience={config.audience}
    responseType={config.responseType}
    scope={config.scope}
  >
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </Auth0Provider>,
  document.getElementById("root")
);

export default function Viewport(props) {
  useGlobalStyles();

  return (
    <React.Fragment>
      <CssBaseline />
      {props.children}
    </React.Fragment>
  );
}

function PersonalWebsite() {
  const classes = useStyle();
  return (
    <div className={classes.root}>
      <CssBaseline/>

      <Navbar/>

      <Hidden xsDown>
        <SideDrawer/>
      </Hidden>

      <div className={classes.content}>
        {/*<div className={classes.toolbar}/>*/}
        <Router className={classes.root}/>
      </div>
      <Hidden only={['sm', 'md', 'lg', 'xl']}>
        <Footer/>
      </Hidden>
    </div>
  );
}

ReactDOM.render(
  <LayoutProvider>
    <UserProvider>
      <ThemeProvider theme={Themes.default}>
        <CssBaseline />
        <App />
      </ThemeProvider>
    </UserProvider>
  </LayoutProvider>,
  document.getElementById("root"),
);

TopNav = () => {
  const classes = useStyles();
  const isMobileSearchClick = useSelector(
    ({ layout }) => layout.isMobileSearchClick
  );

  return (
    <div>
      <CssBaseline />
      <AppBar elevation={0} position="fixed" className={classes.appBar}>
        {!isMobileSearchClick ? (
          <>
            <StartNav />
            <div className={classes.grow} />

            <MiddleNav />
            <div className={classes.grow} />
            <EndNav />
          </>
        ) : (
          <MobileSearch />
        )}
      </AppBar>
    </div>
  );
}

export default function MyApp({ Component, pageProps }) {
  useJssStyles()
  const classes = useStyles()
  const [appData] = useAppStore(pageProps || {})

  return (
    <PWA errorReporter={reportError}>
      <Head>
        {/* <meta
          key="viewport"
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
        /> */}
      </Head>
      <SessionProvider url="/api/session">
        <MuiThemeProvider theme={theme}>
          <CssBaseline />
          <Header menu={appData && appData.menu} />
          <NavBar tabs={appData && appData.tabs} />
          <main className={classes.main}>
            <Component {...pageProps} />
          </main>
        </MuiThemeProvider>
      </SessionProvider>
    </PWA>
  )
}

render() {
    return (
        <BrowserRouter>
          <MuiThemeProvider theme={ createMuiTheme({palette: { type: this.props.theme }}) }>
          <CssBaseline />
          <div className={ styles.app }>
            <Navigation />
            <Switch>
              <Route path="/" component={ Home } exact />
              <Route path="/login" component={ Login } exact />
              <Route path="/logout" component={ Logout } exact />
              <Route path="/registration" component={ Registration } exact />
              <Route path="/activation" component={ Activation } exact />
              <Route path="/activation/:hash" component={ ActivationHash } exact />
              <Route path="/recovery" component={ Recovery } exact />
              <Route path="/recovery/:hash" component={ RecoveryHash }/>
              <PrivateRoute path='/profile' component={ Profile } authenticated={ this.props.authenticated } exact/>
              <PrivateRoute path='/profile/modify' component={ ProfileModify } authenticated={ this.props.authenticated } exact/>
              <Route component={ Error } />
            </Switch>
          </div>
        </MuiThemeProvider>
      </BrowserRouter>
    )
  }

LoginPage = () => {
	const classes = useStyles();
	const login = useLogin();
	const notify = useNotify();
	const submit = ({ email, password }) => {
		login({ email, password }).catch(() => notify('Invalid email or password'));
	};
	return (
		<Container component="main" maxWidth="xs">
			<CssBaseline />
			<div className={classes.paper}>
				<Avatar className={classes.avatar}>
					<LockOutlinedIcon />
				</Avatar>
				<Typography component="h1" variant="h5">
					Entrar na Plataforma
				</Typography>
				<Form fields={['email', 'password']} onSubmit={submit} buttonLabel="Entrar" />
				<Grid container>
					<Grid item xs>
						<Link to="/auth/forgot-password">Esqueceu a senha?</Link>
					</Grid>
				</Grid>
				<Notification />
			</div>
			<Box mt={8}>
				<Copyright />
			</Box>
		</Container>
	);
}

Layout = memo(({ frontmatter, contents, children }) => {



  const classes = useStyles()

  const theme = createTheme({
    root: {
      display: 'flex',
    },
    palette: {
      primary: {
        main: "rgb(62, 175, 124)"
      }
    },
  });

  return (
    <>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <title>{frontmatter.title_cn}</title>
        <div className={classes.root}>
          <Frame frontmatter={frontmatter} contents={contents} />
          <Main frontmatter={frontmatter} children={children} />
        </div >
      </ThemeProvider>
    </>

  )

})

App = ({
  Component,
  pageProps
}) => {
  return (
    <>
      <ThemeProvider theme={theme}>
        <GlobalStyles />
        <CssBaseline />
        <Provider
          // Provider options are not required but can be useful in situations where
          // you have a short session maxAge time. Shown here with default values.
          options={{
            // Client Max Age controls how often the useSession in the client should
            // contact the server to sync the session state. Value in seconds.
            // e.g.
            // * 0  - Disabled (always use cache value)
            // * 60 - Sync session state with server if it's older than 60 seconds
            clientMaxAge: 0,
            // Keep Alive tells windows / tabs that are signed in to keep sending
            // a keep alive request (which extends the current session expiry) to
            // prevent sessions in open windows from expiring. Value in seconds.
            //
            // Note: If a session has expired when keep alive is triggered, all open
            // windows / tabs will be updated to reflect the user is signed out.
            keepAlive: 0
          }}
          session={pageProps.session}>
          <QueryClientProvider client={queryClient}>
            <MuiPickersUtilsProvider utils={MomentUtils}>
              <Component {...pageProps} />
            </MuiPickersUtilsProvider>
          </QueryClientProvider>
        </Provider>
      </ThemeProvider>
    </>
  );
}

// Wraping App.jsx into Provider component to make data from the store avaliable throughout all application
// Also wraping the App.jsx with ThemeProvider and CssBaseline to applay Material-UI theme settings
ReactDOM.render(
  <div>
    <Suspense fallback={<Loading />}>
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <App />
        </ThemeProvider>
      </Provider>
    </Suspense>
  </div>,

  document.getElementById('root')
);

export default function ThemeConfig({ children }) {
  const themeOptions = useMemo(
    () => ({
      palette,
      shape,
      typography,
      breakpoints,
      shadows,
      customShadows
    }),
    []
  );

  const theme = createTheme(themeOptions);
  theme.components = componentsOverride(theme);

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <GlobalStyles />
        {children}
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

function runApp() {
  const appVersion = window.electron.getAppVersion();
  const appEnvironment = window.electron.getAppEnvironment();

  Sentry.init({
    dsn: "https://[email protected]/5827747",
    environment: appEnvironment,
    release: appVersion
  });

  ReactDOM.render(
    <React.StrictMode>
      <Sentry.ErrorBoundary fallback={({ error, resetError }) => <ErrorFallback error={error} resetErrorBoundary={resetError} />}>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <App />
        </ThemeProvider>
      </Sentry.ErrorBoundary>
    </React.StrictMode>,
    document.getElementById("root")
  );
}

App = () => {
    logCredits();

    return (
        <ThemeProvider>
            <CssBaseline />
            <Router>
                <HelmetMeta />
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/resume" component={Resume} />
                    <Route path="*" component={PageNotFound} />
                </Switch>
            </Router>
        </ThemeProvider>
    );
}

export default function Gallery () {
  const classes = useStyles()
  const gallerySchSample = useSelector(state => state.galleryReducer.schematics)
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(fetchGallery())
    dispatch(fetchRole())
  }, [dispatch])

  return (
    <div className={classes.root}>
      <CssBaseline />
      <Container maxWidth="lg" className={classes.header}>
        <Grid
          container
          direction="row"
          justify="flex-start"
          alignItems="flex-start"
          alignContent="center"
          spacing={3}
        >
          {/* eSim Gallery Header */}
          <Grid item xs={12}>
            <MainCard />
          </Grid>

          {/* Listing Gallery Schematics */}
          {console.log(gallerySchSample)}
          {gallerySchSample.map(
            (sch) => {
              return (
                <Grid item xs={12} sm={6} lg={4} key={sch.save_id}>
                  <SchematicCard sch={sch} />
                </Grid>
              )
            }
          )}

        </Grid>
      </Container>
    </div>
  )
}

App = () => {
  const [appTheme, setAppTheme] = useState(true);
  const { location } = useSelector(selectLocation);
  const dispatch = useDispatch();
  const styles = useAppStyles({ isHome: location === '/' });
  const isLoading = useTranslationsLoad();

  let localStorageThemeMode = getFromLocalStorage('theme');
  const themeMode = localStorageThemeMode === LIGHT_THEME;
  if (!localStorageThemeMode) {
    localStorageThemeMode = LIGHT_THEME;
  }

  useEffect(() => {
    dispatch(preserveUser());
  }, [dispatch]);

  const themeValue = theme(localStorageThemeMode);

  useEffect(() => {
    setAppTheme(themeMode);
  }, [themeMode]);

  if (isLoading) return errorOrLoadingHandler(null, isLoading);

  return (
    <div className={styles.mainBar}>
      <ThemeProvider theme={themeValue}>
        <ThemeContext.Provider value={[appTheme, setAppTheme]}>
          <CategoriesContextProvider>
            <SnackBarContextProvider>
              <CurrencyContextProvider>
                <CssBaseline />
                <Routes />
                <Chat />
              </CurrencyContextProvider>
            </SnackBarContextProvider>
          </CategoriesContextProvider>
        </ThemeContext.Provider>
      </ThemeProvider>
    </div>
  );
}

function App() {
  const classes = useStyles();
  return (
    <ThemeProvider theme={theme}>
      <Container fixed>
        <CssBaseline />
        <Header />
        <Typography variant="h3">Home Page</Typography>
        <Grid container>
          <Grid item xs={6}>
            <Paper elevation={3} className={classes.hero}>
              <img src="/fruit/mango.jpg" className={classes.media} />
              <div className={classes.heroText}>
                <Typography variant="h4">
                   Mango
                </Typography>
                <Typography variant="body1">
                  A mango is a juicy stone fruit (drupe) produced from
                  numerous species of tropical trees belonging to the
                  flowering plant genus Mangifera, cultivated mostly for
                  their edible fruit.
                </Typography>
              </div>
            </Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper elevation={3} className={classes.hero}>
              <img src="/fruit/peach.jpg" className={classes.media} />
              <div className={classes.heroText}>
                <Typography variant="h4">
                   Peach
                </Typography>
                <Typography variant="body1">
                  The peach (Prunus persica) is a deciduous tree native
                  to the region of Northwest China between the Tarim Basin 
                  and the north slopes of the Kunlun Mountains, where it 
                  was first domesticated and cultivated. It bears an 
                  edible juicy fruit called a peach or a nectarine.
                </Typography>
              </div>
            </Paper>
          </Grid>
        </Grid>

        <div className={classes.carouselContainer}>
          <ProductCarousel />
        </div>
      </Container>
    </ThemeProvider>
  );
}

export default function SignIn() {
  const classes = useStyles();

  return (
    <Grid container component="main" className={classes.root}>
      <CssBaseline />
      <Grid item xs={false} sm={4} md={7} className={classes.image} />
      <Grid
        item
        xs={12}
        sm={8}
        md={5}
        component={Paper}
        elevation={6}
        square
        className={classes.imageS}
      >
        <div className={classes.paper}>
          <Avatar className={classes.avatar}>
            <DonutSmallIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Connect
          </Typography>
          <br />
          <Typography component="h3" variant="h6">
            <i>It's exclusive!</i>
          </Typography>
          <br />
        </div>
        <div className={classes.paper + " googleBtnWrapper"}>
          <GsignIn
            element={
              <GoogleButton
                type="dark"
                className={classes.submit + " googleBtn"}
                onClick={() => {
                  console.log("Google button clicked");
                }}
              />
            }
          />

          <br />
          <Typography component="h5" variant="h6">
            <i>using @daiict.ac.in email.</i>
          </Typography>
        </div>
        <div className={classes.paperCopy}>
          <Box mt={5} className={classes.copyright}>
            <Copyright />
          </Box>
        </div>
      </Grid>
    </Grid>
  );
}

function MyApp({ Component, pageProps }) {
  const [loading, setLoading] = React.useState(false)

  React.useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side')

    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles)
    }

    setLoading(!false)
  }, [])

  return (
    <React.Fragment>
      <Head>
        <title>Awesome Year in Reviews</title>
        <link rel="icon" type="image/ico" href="/robocon.png" />
        <meta name="theme-color" content="rgba(225, 18, 51)" />
        <meta
          name="description"
          content="A gallery of year-in review articles written by folks in the tech community"
        />
        <meta
          property="og:title"
          content="Year in Review Gallery"
          key="ogtitle"
        />
        <meta
          property="og:description"
          content="A gallery of year-in review articles written by folks in the tech community"
          key="ogdesc"
        />
        <meta
          property="og:image"
          content={`https://year-in-review.netlify.app/img/review.png`}
          key="ogimage"
        />
        <meta
          property="og:site_name"
          content="https://year-in-review.netlify.app"
          key="ogsitename"
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Monoton&family=Ubuntu:wght@300;400;500&display=swap"
          rel="stylesheet"
        ></link>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </React.Fragment>
  )
}

App = () => {
  const dispatch = useDispatch()

  useEffect(() => {
    firebase.auth().onAuthStateChanged(async (user) => {
      dispatch(setProgressVisibility(true))

      if (user) {
        const userInfo = { uid: user.uid }
        userInfo.creationTime = user.metadata.creationTime

        if (user.providerData && user.providerData.length) {
          userInfo.name = user.providerData[0].displayName
          userInfo.photo = user.providerData[0].photoURL
        }

        dispatch(setUserInfo(userInfo))

        await Promise.all([
          dispatch(startSetSettings()),
          dispatch(startSetLabels()),
          dispatch(startSetSessions()),
        ])

        dispatch(setProgressVisibility(false))
      } else {
        firebase.auth().signInAnonymously()
      }
    })
  }, [dispatch])

  return (
    <ThemeConfig>
      <CssBaseline />
      <GlobalStyle />
      <BrowserRouter>
        <AppBar />
        <MainContainer />
      </BrowserRouter>
    </ThemeConfig>
  )
}