@material-ui/core#MuiThemeProvider JavaScript Examples

The following examples show how to use @material-ui/core#MuiThemeProvider. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: app.js    From x-admin-device-donation with MIT License 6 votes vote down vote up 
function AsyncResources({ client }) {
  let introspectionResultObjects =
    client.cache?.data?.data?.ROOT_QUERY?.__schema.types
      ?.filter((obj) => obj.kind === "OBJECT")
      ?.map((elem) => elem.name);
  const resources = resourceConfig;
  let filteredResources = resources;
  if (introspectionResultObjects) {
    filteredResources = resources.filter((elem) =>
      introspectionResultObjects.includes(elem.name)
    );
  }
  if (!resources) return null;
  return (
    <MuiThemeProvider theme={createMuiTheme(customTheme)}>
      <AdminUI disableTelemetry loginPage={false} layout={customLayout}>
        {filteredResources.map((resource) => (
          <Resource
            key={resource.name}
            name={resource.name}
            list={resource.list}
            edit={resource.edit}
            create={resource.create}
            show={resource.show}
          />
        ))}
      </AdminUI>
    </MuiThemeProvider>
  );
}
Example #2
Source File: PageLayout.jsx    From test-deploy-gatsby-apps with BSD Zero Clause License 6 votes vote down vote up 
PageLayout = ({ children, hideMenu, cartSize }) => {
  const classes = useStyles()
  return (
    <MuiThemeProvider theme={theme}>
      <Grid container justify={"center"}>
        <Grid item xs={12}>
          {!hideMenu && <HeaderWithMenu routes={routes} cartSize={cartSize} />}
          {hideMenu && <SimpleHeader />}
        </Grid>
        <Grid item xs={12} style={{ paddingTop: "20vh" }}>
          <Grid container justify={"center"}>
            <Grid item xs={12}>
              <div>{children}</div>
            </Grid>
          </Grid>
        </Grid>
        <Grid item xs={12} className={classes.footerContainer}>
          <AppFooter />
        </Grid>
      </Grid>
    </MuiThemeProvider>
  )
}
Example #3
Source File: _app.js    From Portfolio with MIT License 6 votes vote down vote up 
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>
  );
}
Example #4
Source File: NavigationBar.js    From voicemail-for-amazon-connect with Apache License 2.0 5 votes vote down vote up 
render() {
        let {classes} = this.props;
        return (
            <MuiThemeProvider theme={theme}>
                <div className={classes.root}>
                    <AppBar position="static">
                        <Toolbar>
                            <Grid container direction="row" justify="space-between" alignContent="center"
                                  alignItems="center">
                                <Grid item>
                                    <Grid container direction="row" alignItems="center" alignContent="center">
                                        <Grid item>
                                            <img alt="Amazon Connect Logo" className={classes.logo}
                                                 src={process.env.PUBLIC_URL + '/images/logo80_2x.png'}/>
                                        </Grid>
                                        <Grid item>
                                            <Typography variant="h5">
                                                Amazon Connect Voicemail Management Portal
                                            </Typography>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item>
                                    <Grid container direction="row">
                                        <Grid item className={classes.userInfo}>
                                            <Grid container direction="column" alignContent="center"
                                                  alignItems="flex-end">
                                                <Grid item><p className={classes.role}>{this.props.userRole}</p></Grid>
                                                <Grid item><p className={classes.email}>{this.props.userEmail}</p>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                        <Grid item>
                                            <Grid container direction="row" alignItems={"center"}>
                                                <Grid item>
                                                    <GlobalSettingsButton/>
                                                </Grid>
                                                <Grid item>
                                                    <IconButton color="inherit" onClick={this.handleOnLogout}>
                                                        <ExitToApp/>
                                                    </IconButton>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Toolbar>
                    </AppBar>
                </div>
            </MuiThemeProvider>
        );
    }
Example #5
Source File: About.js    From macovidvaccines.com with MIT License 5 votes vote down vote up 
function About() {
    return (
        <MuiThemeProvider theme={theme}>
            <Menu />
            <MainComponent />
        </MuiThemeProvider>
    );
}
Example #6
Source File: App.js    From macovidvaccines.com with MIT License 5 votes vote down vote up 
function App() {
    return (
        <MuiThemeProvider theme={theme}>
            <Menu />
            <MainComponent />
        </MuiThemeProvider>
    );
}
Example #7
Source File: AppOld.js    From macovidvaccines.com with MIT License 5 votes vote down vote up 
function App({ zipParam }) {
    return (
        <MuiThemeProvider theme={theme}>
            <Menu />
            <MainComponent zipParam={zipParam} />
        </MuiThemeProvider>
    );
}