@material-ui/core/styles#MuiThemeProvider JavaScript Examples

export function App() {
  return (
    <Elements stripe={stripePromise}>
      <StylesProvider generateClassName={generateClassName} jss={jss}>
        <MuiThemeProvider theme={muiTheme}>
          <ViewSize>
            <Main />
            <GlobalStyles />
          </ViewSize>
        </MuiThemeProvider>
      </StylesProvider>
    </Elements>
  );
}

render() {
		return (
			<MuiThemeProvider theme={theme}>
				<LanguageSelect />

				<TosContent reSign={this.state.tosResign} tosAccept={this.handleTosAccepted} tosDecline={this.handleTosDecline} />

				{this.state.snackBarOps.open && (
					<AppSnackbar ops={this.state.snackBarOps} />
				)}
			</MuiThemeProvider>
		);
	}

function App() {
  const platforms = getFilteredPlatforms();
  const [filteredPlatforms, setFilteredPlatforms] = useState(platforms);
  return (
    <MuiThemeProvider theme={theme}>
      <FilteredPlatformsContext.Provider value={{ value: filteredPlatforms, set: setFilteredPlatforms }}>
        <ApolloProvider client={client}>
          <Header />
          <SupportedPlatforms />
          <Contributors />
          <GitCoin />
          <GridLayout />
        </ApolloProvider>
      </FilteredPlatformsContext.Provider>
    </MuiThemeProvider>
  );
}

QuestionContentTypeLayout = props => {
    const {
        links,
        questions,
        onChange,
        title,
        tags,
        currentContainer,
        onReset,
        contentTypes,
        editMode,
        onSave,
    } = props;
    return (
        <MuiThemeProvider
            theme={theme}
        >
            <QuestionContainer
                links={links}
                questions={questions}
                onChange={onChange}
                title={title}
                tags={tags}
                currentContainer={currentContainer}
                onResetToOriginal={onReset}
                contentTypes={contentTypes}
                editMode={editMode}
                onSave={onSave}
            />
        </MuiThemeProvider>
    );
}

render() {
    return (
      <MuiThemeProvider theme={ createMuiTheme(interestTheme) }>
        <CssBaseline />
        <IpfsRouter>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            minHeight: '100vh',
            alignItems: 'center',
            background: colors.white
          }}>
            <Header />
            <Switch>
              <Route path="/charts/:pair" render={(props) => <Charts {...props} /> } />
              <Route path="/feeds">
                <Feeds />
              </Route>
              <Route path="/contracts">
                <Contracts />
              </Route>
              <Route path="/">
                <Feeds />
              </Route>
            </Switch>
          </div>
        </IpfsRouter>
      </MuiThemeProvider>
    );
  }

render() {
    const { classes } = this.props;

    return (
      <MuiThemeProvider theme={theme}>
        <div className={classes.root}>
          <Home />
        </div>
      </MuiThemeProvider>
    );
  }

render() {
    return (
      <Grid
        container
        direction="row"
        justify="center"
        alignItems="center"
        style={this.props.pageStyles}
      >
        {this.state.loading && !this.state.error && (
          <MuiCircularProgress />
        )}
        {this.state.error && <span style={{ color: 'red' }}>{this.state.error}</span>}
        {!this.state.loading && (
        <MuiThemeProvider theme={this.state.muiTheme}>
          <CssBaseline />
          <div className={styles.container}>
            {this.state.story
                && this.state.story
                  .map((item, index) => renderComponents(this.components, item, index))}
          </div>
        </MuiThemeProvider>
        )}
      </Grid>
    );
  }

App = () => (
  <Provider store={store}>
  <MuiThemeProvider theme={theme}>
    <SnackbarProvider maxSnack={1}>
      <Providers />
    </SnackbarProvider>
  </MuiThemeProvider>
  </Provider>
)

_%>

ReactDOM.render(
    <AreasWrapper>
        <AuthProvider>
            <AuthApolloProvider>
                <MuiThemeProvider theme={theme}>
                    <BrowserRouter>
                        {routes}
                    </BrowserRouter>
                </MuiThemeProvider>
            </AuthApolloProvider>
        </AuthProvider>
    </AreasWrapper>,
    document.getElementById("root")
);

clearConsoleErrors().then(() => {
  const theme = createMuiTheme({
    typography: {
      useNextVariants: true,
      fontFamily: ['"Roboto"', 'sans-serif'],
      fontSize: 13,
      htmlFontSize: 16,
    }
  });

  window.addEventListener('contextmenu', (e) => {
    if (e) {
      e.stopPropagation();
      e.preventDefault();
    }
  }, true);

  ReactDOM.render(
    <MuiThemeProvider theme={theme}>
      <SnackbarProvider
        maxSnack={3}
        action={[
          <IconButton key="actionButton">
            <Close fontSize="small" color="disabled" />
          </IconButton>
        ]}
      >
        <App />
      </SnackbarProvider>
    </MuiThemeProvider>,
    document.getElementById('root')
  );
});

export default function ({ children, theme }) {
  const customTheme = createMuiTheme(theme);
  return (
    <>
      <MuiThemeProvider theme={customTheme}>
        <ThemeProvider theme={customTheme}>{children}</ThemeProvider>
      </MuiThemeProvider>
    </>
  );
}

render() {
        const {
            selectedThemeKey,
            muiTheme,
        } = this.state;

        return (
            <MuiThemeProvider theme={muiTheme}>
                <Router>
                    <Switch>
                        {/* Signing pages (FullScreenLayout) */}
                        {false && <Route path={['/signin', '/signup']}>
                            <FullScreenLayout>
                                <Switch>
                                </Switch>
                            </FullScreenLayout>
                        </Route>}

                        {/* other pages (Layout) */}
                        <Route path='/'>
                            <Layout
                                themeKeys={themeKeys}
                                selectedThemeKey={selectedThemeKey}
                                onThemeChange={this.onThemeChange}>
                                <Switch>
                                    <Route exact path='/' component={() => { return <Redirect to='/statistics/dashboard' /> }} />
                                    {/* Statistics */}
                                    <Route path='/statistics/dashboard' component={DashboardPage} />
                                    <Route path='/statistics/risk_ranking' component={RiskRankingPage} />
                                    {/* Not found */}
                                    <Route path='*' component={NotFoundPage} />
                                </Switch>
                            </Layout>
                        </Route>
                    </Switch>
                </Router>
            </MuiThemeProvider>
        )
    }

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>
  )
}

ReactDOM.render(
    <MuiThemeProvider theme={theme}>
        <CssBaseline/>
        <Router>
            <AppStateProvider>
                <Switch>
                    <PrivateRoute exact path={basePath}>
                        <VideoApp/>
                    </PrivateRoute>
                    <PrivateRoute exact path={`${basePath}room/:URLRoomName`}>
                        <VideoApp/>
                    </PrivateRoute>
                    <PrivateRoute exact path={`${basePath}room/:URLRoomName/:UserName`}>
                        <VideoApp/>
                    </PrivateRoute>
                    <Redirect to={basePath}/>
                </Switch>
            </AppStateProvider>
        </Router>
    </MuiThemeProvider>,
    document.getElementById('root')
);

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>
    )
  }

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <Router>
        <Route path="/" exact component={App} />
      </Router>
    </MuiThemeProvider>
  </Provider>,
  document.getElementById('root')
);

render() {

    return (
      <MuiThemeProvider theme={ createMuiTheme(tradeTheme) }>
        <CssBaseline />
        <IpfsRouter>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            minHeight: '100vh',
            alignItems: 'center',
            background: "#f9fafb"
          }}>
            <Footer />
            <Switch>
              <Route path="/open">
                <Open />
              </Route>
              {<Route path="/close">
                <Close />
              </Route>}
              <Route path="/">
                <Home />
              </Route>
            </Switch>
          </div>
        </IpfsRouter>
      </MuiThemeProvider>
    );
  }

render() {

    return (
      <MuiThemeProvider theme={ createMuiTheme(theme) }>
        <CssBaseline />
        <IpfsRouter>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            minHeight: '100vh',
            alignItems: 'center',
            background: "#f9fafb"
          }}>
            <Footer />
            <Switch>
              <Route path="/liquidate">
                <Liquidate />
              </Route>
              <Route path="/liquidationCandidates">
                <LiquidationCandidates />
              </Route>
              <Route path="/">
                <Home />
              </Route>
            </Switch>
          </div>
        </IpfsRouter>
      </MuiThemeProvider>
    );
  }

render() {
    return (
      <MuiThemeProvider theme={ createMuiTheme(theme) }>
        <CssBaseline />
        <IpfsRouter>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            minHeight: '100vh',
            alignItems: 'center',
            background: "#f9fafb"
          }}>
            <Switch>
              <Route path="/">
                <Delegate />
              </Route>
            </Switch>
          </div>
        </IpfsRouter>
      </MuiThemeProvider>
    );
  }

render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <Head>
          <title>react-hook-qrcode</title>
        </Head>
        {/* Wrap every page in Jss and Theme providers */}
        <JssProvider
          registry={this.pageContext.sheetsRegistry}
          generateClassName={this.pageContext.generateClassName}
        >
          {/* MuiThemeProvider makes the theme available down the React
              tree thanks to React context. */}
          <MuiThemeProvider
            theme={this.pageContext.theme}
            sheetsManager={this.pageContext.sheetsManager}
          >
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            <CssBaseline />
            {/* Pass pageContext to the _document though the renderPage enhancer
                to render collected styles on server-side. */}
            <Component pageContext={this.pageContext} {...pageProps} />
          </MuiThemeProvider>
        </JssProvider>
      </Container>
    );
  }

render() {
		return (
			<MuiThemeProvider theme={theme}>
				{this.state.snackBarOps.open && (
					<AppSnackbar ops={this.state.snackBarOps} />
				)}

				<Header
					routeTo={(newPath) => this.props.history.push(newPath)}
				/>

				<AppTiles appClients={this.state.registeredClients} />
			</MuiThemeProvider>
		)
	}

ReactDOM.render(
  <Provider store={createStore(reducers, applyMiddleware(thunk, logger))}>
    <MuiThemeProvider theme={Theme}>
      <IntlProvider locale="en" messages={messagesEn}>
        <App/>
      </IntlProvider>
    </MuiThemeProvider>
  </Provider>,
  document.querySelector('#root')
)

render() {
		return (
			<div>
				<MuiThemeProvider theme={theme}>
					<LandingPage />
				</MuiThemeProvider>
			</div>
		);
	}

render() {
    if (!this.state.account) {
      return <div>Loading Web3, accounts</div>;
    }
    return (
      <MuiThemeProvider theme={THEME}>

        <BrowserRouter>
          <div className="App">
            <Navbar/>
            <div className="app-content-div">
              <Switch>
                <Route path="/map">
                  <Map  account={this.state.account} signer={this.state.signer}/>
                </Route>
                <Route path="/order">
                  <Order  account={this.state.account} signer={this.state.signer} gasPrice={this.state.gasPrice}/>
                </Route>
                <Route path="/dashboard">
                  <Dashboard  account={this.state.account}/>
                </Route>
                <Route path="/history">
                  <History/>
                </Route>
                <Route path="/driver">
                  <Driver account={this.state.account}/>
                </Route>
              </Switch>
            </div>
          </div>
        </BrowserRouter>
      </MuiThemeProvider>
    );
  }

render() {
    return (
      <div>
        <MuiThemeProvider theme={theme}>
          <span style={{ fontFamily: "Roboto", fontSize: 22, fontWeight: 300, marginBottom: 20 }}>Raw JSON Binary:</span>
          <div id="formatter"></div>
          <div style={{
            margin: 0,
            padding: 0,
            border: 0,
            fontSize: '100%',
            font: 'inherit',
            verticalAlign: 'baseline',
            width: '99%'
          }}>
            <CodeMirror ref="display" value={this.state.inputText} onChange={this.onInputTextChange} options={inputOptions} preserveScrollPosition={true} autoCursor={false} />
            <br />
            <hr />
            <br />
            <span style={{ fontFamily: "Roboto", fontSize: 22, fontWeight: 300, marginBottom: 20 }}>Formatted JSON:</span>
            <FormattedJSON
              inputText={this.getJSONData()}
            />
            <br />
          </div>
        </MuiThemeProvider>
      </div>
    );
  }

function App({ routes }) {
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <FirebaseAppProvider firebaseConfig={firebaseConfig} initPerformance>
        <NotificationsProvider>
          <>
            <ErrorBoundary>
              <Router>{routes}</Router>
            </ErrorBoundary>
            <SuspenseWithPerf traceId="load-messaging">
              <SetupMessaging />
            </SuspenseWithPerf>
          </>
        </NotificationsProvider>
      </FirebaseAppProvider>
    </MuiThemeProvider>
  );
}

render() {
		return (
			<MuiThemeProvider theme={theme}>
				<Header
					routeTo={(newPath) => this.props.history.push(newPath)}
				/>

				<Content reloadUserData={this.loadUserAttributes} />
			</MuiThemeProvider>
		);
	}

function App({ routes, store }) {
  return (
    <MuiThemeProvider theme={theme}>
      <Provider store={store}>
        <ReactReduxFirebaseProvider
          firebase={firebase}
          config={defaultRRFConfig}
          dispatch={store.dispatch}
          createFirestoreInstance={createFirestoreInstance}>
          <Router>{routes}</Router>
        </ReactReduxFirebaseProvider>
      </Provider>
    </MuiThemeProvider>
  )
}

Root = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <Provider
        languageStore={languageStore}
        notificationStore={notificationStore}
      >
        <Router basename="/">
          <Switch>
            <Route
              path=""
              component={App}
            />
          </Switch>
        </Router>
      </Provider>
    </MuiThemeProvider>
  );
}