@material-ui/core#ThemeProvider JavaScript Examples

AllTheProviders = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <MuiPickersUtilsProvider utils={MomentUtils}>
        <QueryClientProvider client={queryClient}>
          {children}
        </QueryClientProvider>
      </MuiPickersUtilsProvider>
    </ThemeProvider>
  );
}

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

describe('Empty order component tests', () => {
  const buttonTitle = 'до каталогу';
  const emptyTitle = 'Ваш кошик порожній';

  beforeEach(() => {
    render(
      <ThemeProvider theme={themeValue}>
        <Router>
          <EmptyOrder emptyTitle={emptyTitle} buttonTitle={buttonTitle} />
        </Router>
      </ThemeProvider>
    );
  });

  it('should render title', () => {
    const findeElement = screen.getByTestId('title');

    expect(findeElement.textContent).toBe(emptyTitle);
  });

  it('render text in button', () => {
    const linkItem = screen.getByText(buttonTitle);

    expect(linkItem).toBeInTheDocument();
  });
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <CssBaseline />
      <Router>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/admin" component={AdminApp} />
        </Switch>
      </Router>
      {/* <Footer /> */}
    </ThemeProvider>
  );
}

ReactDOM.render(
  <Provider store={Store}>
    <RawIntlProvider value={intl.reactIntl}>
      <React.StrictMode>
        <ThemeProvider theme={theme}>
          <StylesProvider jss={jss}>
            <Router>
              <App />
            </Router>
          </StylesProvider>
        </ThemeProvider>
      </React.StrictMode>
    </RawIntlProvider>
  </Provider>,
  document.getElementById('root')
);

function App() {
  return (
    <HashRouter>
      <ThemeProvider theme={theme}>
        <React.Suspense fallback={null}>
          <Page title="Material UI App">
            <Typography variant="h6">Dialog Component</Typography>
            <Dialog />
            <Divider style={{ margin: "16px 0" }} />
            <Typography variant="h6">Tabs Component</Typography>
            <Tabs />
          </Page>
        </React.Suspense>
      </ThemeProvider>
    </HashRouter>
  );
}

function App() {
  return (
    <HashRouter>
      <ThemeProvider theme={theme}>
        <React.Suspense fallback={null}>
          <Page title="Material UI App">
            <Typography variant="h6">Dialog Component</Typography>
            <Dialog />
            <Divider style={{ margin: '16px 0' }} />
            <Typography variant="h6">Tabs Component</Typography>
            <Tabs />
          </Page>
        </React.Suspense>
      </ThemeProvider>
    </HashRouter>
  );
}

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

function App() {
  const classes = useStyles();
  return (
    <Provider store={store}>
      <ThemeProvider theme={Theme}>
        <div className={classes.App}>
          <Home />
        </div>
      </ThemeProvider>
    </Provider>
  );
}

ProviderWrapper = ({ children }) => (
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        {children}
      </ReactReduxFirebaseProvider>
    </ThemeProvider>
  </Provider>
)

ReactDOM.render(
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <App />
      </ReactReduxFirebaseProvider>
    </ThemeProvider>
  </Provider>,
  document.getElementById("root")
);

export default function MyApp(props) {
  const { Component, pageProps } = props;

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

  
  return (
    <React.Fragment>
      <ThemeProvider theme={darkMode.value ? darkTheme : lightTheme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </React.Fragment>
  );
}

Router = () => {
  const { store, persistor } = _store;

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <ThemeProvider theme={materialTheme}>
          <GlobalStyle />
          <App />
        </ThemeProvider>
      </PersistGate>
    </Provider>
  );
}

IndexPage = () => (
  <ThemeProvider theme={theme}>
    <Landing />
    <VisionMissionComponent />
    <Statistics />
    <TeamMember />
    <Footer />
  </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>
    </>
  );
}

Table = ({
  title,
  data,
  columns,
  options,
  themeTable
}) => {

  return (
    themeTable
      ? <ThemeProvider theme={themeTable}>
        <MUIDataTable
          title={title}
          data={data}
          columns={columns}
          options={options}
        />
      </ThemeProvider>
      : <MUIDataTable
        title={title}
        data={data}
        columns={columns}
        options={options}
      />
  );

}

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

// 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')
);

App = () => {
  return (
    <div className="App">
      <SnackbarProvider maxSnack={3}>
        <ThemeProvider theme={theme}>
          <Web3Provider
            render={(network) => (
              <div>
                <NarBar />
                <Route exact path="/Alternative-Uniswap-Interface/">
                  <CoinSwapper network={network} />
                </Route>

                <Route exact path="/Alternative-Uniswap-Interface/liquidity">
                  <Liquidity network={network} />
                </Route>
              </div>
            )}
          ></Web3Provider>
        </ThemeProvider>
      </SnackbarProvider>
    </div>
  );
}

function AudioHint(props) {
  return (
    <div style={{ margin: "0 auto", textAlign: "center" }}>
      <ThemeProvider theme={muiTheme}>
        <AudioPlayer
          margin="10px"
          max-width="500px"
          useStyles={useStyles}
          src={props.audio}
          loop={true}
        />
      </ThemeProvider>
    </div>
  );
}

ReactDOM.render(
  <React.StrictMode>
	<ThemeProvider theme={theme}>
    <App />
	</ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

function Layout(props) {
  const user = props.user;
  const names = props.names;
  const onChange = props.onChange;
  const theme = createMuiTheme({
    palette: {
      primary: {
        main: "#8ebd7b",
        contrastText: "#ffffff",
      },
      secondary: {
        main: "#758E9D",
      },
    },
    typography: {
      fontFamily: ["Lato"],
    },
  });

  return (
    <>
      <link
        href="https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap"
        rel="stylesheet"
      ></link>
      <style global jsx>{`
        body {
          font-family: Lato;
          letter-spacing: 1px;
          word-spacing: 2px;
          color: ${"#000000"};
        }
      `}</style>
      <ThemeProvider theme={theme}>
        <AppNavbar user={user} names={names} onChange={onChange} />
        {props.children}
      </ThemeProvider>
      <AppFooter />
    </>
  );
}

App = () => {
  const classes = Styles();

  const dispatch = useDispatch();

  const { displayName } = useSelector((state) => state.user);

  const mode = useSelector((state) => state.util);

  const muiTheme = createMuiTheme({
    palette: {
      type: mode ? "dark" : "light",
    },
  });

  useEffect(() => {
    auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        dispatch(LoginAction(authUser));
      } else {
        dispatch(LogoutAction());
      }
    });
  }, []);

  return (
    <ThemeProvider theme={muiTheme}>
      {!displayName ? (
        <Login />
      ) : (
        <Grid
          container
          className={classes.app}
          style={{ backgroundColor: mode ? darkPrimary : LinkedInBgColor }}
        >
          <Grid
            item
            container
            className={classes.app__header}
            style={{
              boxShadow: mode && "0px 5px 10px -10px rgba(0,0,0,0.75)",
            }}
          >
            {/* Header */}
            <Header />
          </Grid>
          <Grid item container className={classes.app__body}>
            <Hidden smDown>
              <Grid item className={classes.body__sidebar} md={2}>
                {/* Sidebar */}
                <Sidebar />
              </Grid>
            </Hidden>
            <Grid item className={classes.body__feed} xs={12} sm={8} md={5}>
              {/* Feed */}
              <Grid item className={classes.feed__form}>
                <Form />
              </Grid>
              <Grid item className={classes.feed__posts}>
                <Posts />
              </Grid>
            </Grid>
            <Hidden smDown>
              <Grid item className={classes.body__widgets} md={3}>
                {/* Widgets */}
                <Widgets />
              </Grid>
            </Hidden>
          </Grid>
        </Grid>
      )}
    </ThemeProvider>
  );
}

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

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 handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    // eslint-disable-next-line no-console
    console.log({
      email: data.get('email'),
      password: data.get('password'),
    });
  };

  return (
    <ThemeProvider theme={theme}>
      <Container component='main' maxWidth='xs'>
        <CssBaseline />
        <Box
          sx={{
            marginTop: 8,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}>
          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component='h1' variant='h5'>
            Sign in
          </Typography>
          <Box component='form' onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
            <TextField
              margin='normal'
              required
              fullWidth
              id='email'
              label='Email Address'
              name='email'
              autoComplete='email'
              autoFocus
            />
            <TextField
              margin='normal'
              required
              fullWidth
              name='password'
              label='Password'
              type='password'
              id='password'
              autoComplete='current-password'
            />
            <FormControlLabel
              control={<Checkbox value='remember' color='primary' />}
              label='Remember me'
            />
            <Button type='submit' fullWidth variant='contained' sx={{ mt: 3, mb: 2 }}>
              Sign In
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href='#' variant='body2'>
                  Forgot password?
                </Link>
              </Grid>
              <Grid item>
                <Link href='#' variant='body2'>
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
          </Box>
        </Box>
        <Copyright sx={{ mt: 8, mb: 4 }} />
      </Container>
    </ThemeProvider>
  );
}

providerFn = ({ theme, children }) => {
  const muTheme = createTheme(theme)

  return <ThemeProvider theme={muTheme}>{children}</ThemeProvider>
}

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Routes />
    </ThemeProvider>
  );
}

CerpusUI = ({ children }) => {
    const editorContainer = document.getElementById('theBody');
    const bodyLanguageCode =
        editorContainer !== null
            ? editorContainer.getAttribute('data-locale')
            : null;
    const i18nData =
        bodyLanguageCode !== null ? addLanguage(bodyLanguageCode) : i18nDefault;

    return (
        <IntlProvider {...i18nData}>
            <CerpusThemeProvider>
                <ThemeProvider
                    theme={createTheme({
                        palette: {
                            grey: {
                                main: grey[300],
                                dark: grey[400],
                            },
                            primary: {
                                main: '#21456A',
                                dark: '#21456A',
                            },
                            secondary: {
                                main: '#82E066',
                                dark: '#1D7105',
                            },
                        },
                        typography: {
                            htmlFontSize: 10,
                            fontFamily: "'Lato', sans-serif",
                        },
                    })}
                >
                    <CssBaseline />
                    {children}
                </ThemeProvider>
            </CerpusThemeProvider>
        </IntlProvider>
    );
}