@material-ui/core#ThemeProvider TypeScript Examples

The following examples show how to use @material-ui/core#ThemeProvider. 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: context.test.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
wrapper = ({
  entityRef = {
    kind: mockEntityMetadata.kind,
    name: mockEntityMetadata.metadata.name,
    namespace: mockEntityMetadata.metadata.namespace!!,
  },
  children,
}: {
  entityRef?: CompoundEntityRef;
  children: React.ReactNode;
}) => (
  <ThemeProvider theme={lightTheme}>
    <TestApiProvider apis={[[techdocsApiRef, techdocsApiMock]]}>
      <TechDocsReaderPageProvider entityRef={entityRef}>
        {children}
      </TechDocsReaderPageProvider>
    </TestApiProvider>
  </ThemeProvider>
)
Example #2
Source File: index.tsx    From vscode-crossnote with GNU Affero General Public License v3.0 6 votes vote down vote up 
TimerWidgetCreator: WidgetCreator = (args) => {
  const el = document.createElement("span");
  if (!args.attributes["date"]) {
    return ErrorWidget({
      ...args,
      ...{
        attributes: {
          message: "Field 'date' is missing",
        },
      },
    });
  }
  ReactDOM.render(
    <ThemeProvider theme={selectedTheme.muiTheme}>
      <Timer attributes={args.attributes} isPreview={args.isPreview}></Timer>
    </ThemeProvider>,
    el
  );
  return el;
}
Example #3
Source File: RadarFooter.test.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
describe('RadarFooter', () => {
  beforeAll(() => {
    GetBBoxPolyfill.create(0, 0, 1000, 500);
  });

  afterAll(() => {
    GetBBoxPolyfill.remove();
  });

  it('should render', () => {
    const rendered = render(
      <ThemeProvider theme={lightTheme}>
        <svg>
          <RadarFooter {...minProps} />
        </svg>
      </ThemeProvider>,
    );
    const radarFooter = rendered.getByTestId('radar-footer');
    const { x, y } = minProps;
    expect(radarFooter).toBeInTheDocument();
    expect(radarFooter.getAttribute('transform')).toBe(`translate(${x}, ${y})`);
  });
});
Example #4
Source File: _app.tsx    From youtube-2020-june-material-ui-themes with MIT License 6 votes vote down vote up 
export default function MyApp({ Component, pageProps }: AppProps) {
  React.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>Multi-Step Form</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        <AppBar position="fixed">
          <Toolbar variant="dense">
            <Typography variant="h6">Multi-Step Form</Typography>
          </Toolbar>
        </AppBar>

        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Container>
          <Box marginTop={10}>
            <Component {...pageProps} />
          </Box>
        </Container>
      </ThemeProvider>
    </React.Fragment>
  );
}
Example #5
Source File: index.tsx    From signer with Apache License 2.0 6 votes vote down vote up 
ReactDOM.render(
  <ThemeProvider theme={signerTheme}>
    <HashRouter>
      <App
        errors={errorsContainer}
        accountManager={accountManager}
        homeContainer={homeContainer}
        signingContainer={signingContainer}
        connectSignerContainer={connectSignerContainer}
        popupContainer={popupContainer}
      />
    </HashRouter>
  </ThemeProvider>,
  document.getElementById('root')
);
Example #6
Source File: index.tsx    From back-home-safe with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <UseI18nProvider>
      <HashRouter basename="/">
        <ThemeProvider theme={theme}>
          <UseTimeProvider>
            <UseDataProvider>
              <UseTravelRecordProvider>
                <UseBookmarkLocationProvider>
                  <UseCameraProvider>
                    <App />
                  </UseCameraProvider>
                </UseBookmarkLocationProvider>
              </UseTravelRecordProvider>
            </UseDataProvider>
          </UseTimeProvider>
        </ThemeProvider>
      </HashRouter>
    </UseI18nProvider>
  </React.StrictMode>,
  document.getElementById("root")
);
Example #7
Source File: index.tsx    From glific-frontend with GNU Affero General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <BrowserRouter>{appComponent}</BrowserRouter>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #8
Source File: index.tsx    From uno-game with MIT License 6 votes vote down vote up 
ReactDOM.render(
	<React.StrictMode>
		<SocketProvider>
			<ThemeProvider theme={theme}>
				<BrowserRouter>
					<App />
				</BrowserRouter>
			</ThemeProvider>
		</SocketProvider>
	</React.StrictMode>,
	document.getElementById("root"),
)
Example #9
Source File: index.tsx    From fullstack-starterkit with MIT License 6 votes vote down vote up 
function App(): React.ReactElement {
  return (
    <ApolloProvider client={client}>
      <ThemeProvider theme={theme}>
        <Router>
          <Switch>
            <Route exact path={Routes.HOME} component={Home} />
          </Switch>
          <Route component={Footer} />
        </Router>
      </ThemeProvider>
    </ApolloProvider>
  );
}
Example #10
Source File: App.tsx    From metaplex with Apache License 2.0 6 votes vote down vote up 
App = () => {
  const endpoint = useMemo(() => clusterApiUrl(network), []);

  const wallets = useMemo(
    () => [
      getPhantomWallet(),
      getSolflareWallet(),
      getSlopeWallet(),
      getSolletWallet({ network }),
      getSolletExtensionWallet({ network }),
    ],
    [],
  );

  return (
    <ThemeProvider theme={theme}>
      <ConnectionProvider endpoint={endpoint}>
        <WalletProvider wallets={wallets} autoConnect>
          <WalletDialogProvider>
            <Home
              candyMachineId={candyMachineId}
              connection={connection}
              txTimeout={DEFAULT_TIMEOUT}
              rpcHost={rpcHost}
              network={network}
            />
          </WalletDialogProvider>
        </WalletProvider>
      </ConnectionProvider>
    </ThemeProvider>
  );
}
Example #11
Source File: GUIContextProvider.tsx    From parity-bridges-ui with GNU General Public License v3.0 6 votes vote down vote up 
export function GUIContextProvider({ children }: GUIContextProviderProps): React.ReactElement {
  const [drawer, setDrawer] = useLocalStorage('storageDrawer');
  const [isBridged, setBridged] = useState(true);
  const [action, setAction] = useState<TransactionTypes>(TransactionTypes.TRANSFER);

  const value = { drawer, setDrawer, actions, action, setAction, isBridged, setBridged };

  useEffect(() => setBridged(true), [action]);

  return (
    <ThemeProvider theme={createMuiTheme(light)}>
      <CssBaseline />
      <DrawerContext.Provider value={value}>{children}</DrawerContext.Provider>
    </ThemeProvider>
  );
}
Example #12
Source File: App.tsx    From knboard with MIT License 6 votes vote down vote up 
App = () => {
  return (
    <Provider store={store}>
      <Router>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <AuthWrapper />
          <Toast />
          <Global
            styles={css`
              .Mui-focusVisible {
                box-shadow: 0 0 3px 2px ${FOCUS_BOX_SHADOW};
              }
              textarea {
                font-family: inherit;
              }
              .MuiAutocomplete-popper {
                z-index: ${modalPopperAutocompleteModalIndex} !important;
              }
            `}
          />
        </ThemeProvider>
      </Router>
    </Provider>
  );
}
Example #13
Source File: App.tsx    From UsTaxes with GNU Affero General Public License v3.0 6 votes vote down vote up 
App = (): ReactElement => {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')

  const theme = useMemo(
    () =>
      createTheme({
        palette: {
          secondary: prefersDarkMode
            ? {
                light: '#4f5b62',
                main: '#d5d5d5',
                dark: '#000a12',
                contrastText: '#ffffff'
              }
            : {
                light: '#4f5b62',
                main: '#263238',
                dark: '#000a12',
                contrastText: '#ffffff'
              },
          primary: {
            light: '#66ffa6',
            main: '#00e676',
            dark: '#00b248',
            contrastText: '#000000'
          }
        }
      }),
    [prefersDarkMode]
  )

  return (
    <div className="App">
      <ThemeProvider theme={theme}>
        <Main />
      </ThemeProvider>
    </div>
  )
}
Example #14
Source File: index.tsx    From projectboard with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <StylesProvider injectFirst>
      <Provider store={store}>
        <BrowserRouter>
          <Auth0ProviderWithHistory>
            <App />
          </Auth0ProviderWithHistory>
        </BrowserRouter>
      </Provider>
    </StylesProvider>
  </ThemeProvider>,
  document.getElementById('root')
);
Example #15
Source File: index.tsx    From frontend-clean-architecture with MIT License 6 votes vote down vote up 
ReactDOM.render(
    <React.StrictMode>
        <ThemeProvider theme={theme}>
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            <CssBaseline />
            <App />
        </ThemeProvider>
        ,
    </React.StrictMode>,
    document.getElementById("root")
);
Example #16
Source File: CodeScenePageComponent.test.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
describe('CodeScenePageComponent', () => {
  const server = setupServer();
  // Enable sane handlers for network requests
  setupRequestMockHandlers(server);
  let apis: TestApiRegistry;

  // setup mock response
  beforeEach(() => {
    server.use(
      rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))),
    );
    const discoveryApi: DiscoveryApi = {
      async getBaseUrl(pluginId) {
        return `http://base.com/${pluginId}`;
      },
    };
    apis = TestApiRegistry.from([
      codesceneApiRef,
      new CodeSceneClient({ discoveryApi }),
    ]);
  });

  it('should render', async () => {
    const rendered = await renderInTestApp(
      <ApiProvider apis={apis}>
        <ThemeProvider theme={lightTheme}>
          <CodeScenePageComponent />
        </ThemeProvider>
      </ApiProvider>,
      {
        mountedRoutes: {
          '/codescene': rootRouteRef,
        },
      },
    );
    expect(rendered.getByText('CodeScene')).toBeInTheDocument();
  });
});
Example #17
Source File: App.tsx    From firebase-react-typescript-project-template with MIT License 6 votes vote down vote up 
App = (): JSX.Element => {
  return (
    <ThemeProvider theme={createTheme("light")}>
      <CssBaseline />
      <SnackbarNotificationProvider>
        <SessionProvider>
          <Router>
            <Suspense fallback={<div />}>
              <Switch>
                <Route path={SIGNIN_ROUTE}>
                  <SigninSignupPage variant="signin" />
                </Route>
                <Route path={SIGNUP_ROUTE}>
                  <SigninSignupPage variant="signup" />
                </Route>
                <Route path={AUTH_ACTION_PATH}>
                  <AuthAction />
                </Route>
                <PrivateRoute path={APP_LANDING}>
                  <LandingPage />
                </PrivateRoute>
                <Redirect to={APP_LANDING} />
              </Switch>
            </Suspense>
          </Router>
        </SessionProvider>
      </SnackbarNotificationProvider>
    </ThemeProvider>
  );
}
Example #18
Source File: index.tsx    From clarity with Apache License 2.0 6 votes vote down vote up 
ReactDOM.render(
  <ThemeProvider theme={signerTheme}>
    <HashRouter>
      <App
        errors={errorsContainer}
        authContainer={authContainer}
        homeContainer={homeContainer}
        signMessageContainer={signMessageContainer}
        connectSignerContainer={connectSignerContainer}
      />
    </HashRouter>
  </ThemeProvider>,
  document.getElementById('root')
);
Example #19
Source File: index.tsx    From fishbowl with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <AuthWrapper>
      <ApolloWrapper>
        <ThemeProvider theme={theme}>
          <CssBaseline>
            <Container maxWidth="sm" style={{ marginTop: "30px" }}>
              <Suspense fallback={<FishbowlLoading />}>
                <App />
              </Suspense>
            </Container>
          </CssBaseline>
        </ThemeProvider>
      </ApolloWrapper>
    </AuthWrapper>
  </React.StrictMode>,
  document.getElementById("root")
)
Example #20
Source File: AllureReportComponent.test.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
describe('ExampleComponent', () => {
  const server = setupServer();
  // Enable sane handlers for network requests
  setupRequestMockHandlers(server);

  // setup mock response
  beforeEach(() => {
    server.use(
      rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))),
    );
  });

  it('should render', async () => {
    const rendered = await renderInTestApp(
      <ThemeProvider theme={lightTheme}>
        <EntityProvider
          entity={{
            apiVersion: 'backstage.io/v1alpha1',
            kind: 'Component',
            metadata: { name: 'test' },
          }}
        >
          <AllureReportComponent />
        </EntityProvider>
      </ThemeProvider>,
    );
    expect(rendered.getByText('Missing Annotation')).toBeInTheDocument();
  });
});
Example #21
Source File: theme-context.tsx    From malagu with MIT License 5 votes vote down vote up 
render(): React.ReactElement {
        const { children } = this.props;
        return (
            <ThemeProvider theme={this.provider.provide()}>
                {children}
            </ThemeProvider>);
    }
Example #22
Source File: preview.tsx    From storefront with MIT License 5 votes vote down vote up 
withThemeProvider: DecoratorFunction<React.ReactElement> = (storyFn) => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    {storyFn()}
  </ThemeProvider>
)
Example #23
Source File: _app.tsx    From posso-uscire with GNU General Public License v3.0 5 votes vote down vote up 
function App({ Component, pageProps }: AppProps) {
  const classes = useStyles();
  const pageTitle = makeTitle(pageProps?.province);
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
        <meta name="theme-color" content="#000000" />
        <meta
          name="description"
          content="Informazioni sulle restrizioni COVID. Inserisci la tua provincia per sapere facilmente le restrizioni vigenti."
        />
        <meta property="og:url" content="https://possouscire.casa/" />
        <meta property="og:image" content="/italyIcon.png" />
        <meta property="og:title" content="Posso Uscire?" />
        <meta
          property="og:description"
          content="Informazioni sulle restrizioni COVID. Inserisci la tua provincia per sapere facilmente le restrizioni vigenti."
        />

        <link rel="manifest" href="/manifest.json" />

        <title>{pageTitle}</title>
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
        />
      </Head>
      <main>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <LanguageProvider>
            <Container maxWidth="sm" className={classes.container}>
              <Header province={pageProps.province} />
              <Component {...pageProps} />
            </Container>
          </LanguageProvider>
        </ThemeProvider>
      </main>
    </>
  );
}
Example #24
Source File: index.tsx    From uno-game with MIT License 5 votes vote down vote up 
ChooseColorModal: ChooseColorModalType & React.FC<ChooseColorModalProps> = (props) => {
	const classes = useStyles()

	const { callback } = props

	const [opened, setOpened] = useState(true)

	const handleClose = (color: CardColors) => {
		callback(color)
		setOpened(false)
	}

	return (
		<ThemeProvider theme={theme}>
			<Dialog
				open={opened}
				className={classes.dialog}
				PaperProps={{
					className: classes.dialogPaper,
				}}
			>
				<Grid
					container
					alignItems="center"
					justify="center"
					direction="column"
					className={classes.dialogContainer}
				>
					<Grid
						container
						justify="center"
					>
						<img
							src={chooseColorTextImg}
							alt="Choose a color!"
							className={classes.chooseColorImg}
						/>
					</Grid>

					<Divider orientation="horizontal" size={5} />

					<Grid
						container
						alignItems="center"
						justify="center"
						wrap="wrap"
						className={classes.colorSelectorContainer}
					>
						{Object.entries(coloredButtonMap)
							.map(([colorName, info]) => (
								<Grid
									className={classes.colorSelectorButton}
									component={ButtonBase}
									style={{
										backgroundColor: info?.color,
										border: `8px solid ${info?.borderColor}`,
										boxShadow: `0 0 16px ${info?.color}`,
									}}
									onClick={() => handleClose(colorName as CardColors)}
								/>
							))}
					</Grid>
				</Grid>
			</Dialog>
		</ThemeProvider>
	)
}
Example #25
Source File: ErrorCell.test.tsx    From backstage with Apache License 2.0 5 votes vote down vote up 
describe('Sentry error cell component', () => {
  it('should render a link that lead to Sentry', async () => {
    const testIssue = {
      ...mockIssue,
      metadata: {
        type: 'Exception',
        value: 'exception was thrown',
      },
      count: '1',
      userCount: 2,
      permalink: 'http://example.com',
    };
    const cell = render(
      <ThemeProvider theme={lightTheme}>
        <ErrorCell sentryIssue={testIssue} />
      </ThemeProvider>,
    );
    const errorType = await cell.findByText('Exception');
    expect(errorType.closest('a')).toHaveAttribute(
      'href',
      'http://example.com',
    );
  });
  it('should render the title if type is not present', async () => {
    const testIssue = {
      ...mockIssue,
      title: 'Exception: Could not load credentials from any providers',
      count: '1',
      metadata: {},
      userCount: 2,
      permalink: 'http://example.com',
    };
    const cell = render(
      <ThemeProvider theme={lightTheme}>
        <ErrorCell sentryIssue={testIssue} />
      </ThemeProvider>,
    );
    const errorType = await cell.findByText('Exception: Could not load cr...');
    expect(errorType.closest('a')).toHaveAttribute(
      'href',
      'http://example.com',
    );
  });
});
Example #26
Source File: index.tsx    From uno-game with MIT License 5 votes vote down vote up 
PopConfirm: PopConfirmType & React.FC<PopConfirmProps> = (props) => {
	const { title, message, onConfirm } = props

	const [visible, setVisible] = useState(true)

	const classes = useStyles()

	const handleClose = () => {
		setVisible(false)
	}

	const handleConfirm = () => {
		handleClose()

		onConfirm()
	}

	return (
		<ThemeProvider theme={theme}>
			<Dialog
				open={visible}
				onClose={handleClose}
				className={classes.dialog}
			>
				<DialogTitle>{title}</DialogTitle>

				<DialogContent>
					<DialogContentText color="textPrimary">
						{message}
					</DialogContentText>
				</DialogContent>

				<DialogActions>
					<Button
						onClick={handleClose}
						variant="text"
						color="primary"
						type="submit"
					>
						Cancel
					</Button>

					<Button
						onClick={handleConfirm}
						variant="contained"
						color="primary"
						type="submit"
					>
						Confirm
					</Button>
				</DialogActions>
			</Dialog>
		</ThemeProvider>
	)
}
Example #27
Source File: App.tsx    From homebase-app with MIT License 5 votes vote down vote up 
App: React.FC = () => {
  const classes = styles();

  return (
    <ThemeProvider theme={theme}>
      <SnackbarProvider
        classes={{
          variantSuccess: classes.success,
          variantError: classes.error,
          variantInfo: classes.info,
        }}
      >
        <QueryClientProvider client={queryClient}>
          <ActionSheetProvider>
            <Box bgcolor="primary.dark" position="absolute" width="100%">
              <Router>
                <ScrollToTop />
                <Switch>
                  <Route path="/creator">
                    <CreatorProvider>
                      <ThemeProvider theme={legacyTheme}>
                        <DAOCreate />
                      </ThemeProvider>
                    </CreatorProvider>
                    <WarningFooter
                      text={
                        "Homebase is highly experimental, and changes are to be expected in the coming weeks. Please use at your own risk. The DAO you created will not be deprecated."
                      }
                    />
                  </Route>
                  <Route path="/explorer">
                    <TZKTSubscriptionsProvider>
                      <DAOExplorerRouter />
                    </TZKTSubscriptionsProvider>
                    <WarningFooter
                      text={
                        "Homebase is highly experimental, and changes are to be expected in the coming weeks. Please use at your own risk. The DAO you created will not be deprecated."
                      }
                    />
                    <Footer></Footer>
                  </Route>
                  <Route path="/faq">
                    <FAQ />
                  </Route>
                  <Route path="/">
                    <Landing />
                  </Route>
                  <Redirect to="/" />
                </Switch>
              </Router>
            </Box>
          </ActionSheetProvider>
        </QueryClientProvider>
      </SnackbarProvider>
    </ThemeProvider>
  );
}
Example #28
Source File: index.tsx    From End-to-End-Web-Testing-with-Cypress with MIT License 5 votes vote down vote up 
ReactDOM.render(
  <Router history={history}>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </Router>,
  document.getElementById("root")
);
Example #29
Source File: App.tsx    From prompts-ai with MIT License 5 votes vote down vote up 
function App() {
    const dispatch = useDispatch();
    const theme = createMuiTheme({
        palette: {
            type: "dark"
        }
    });

    useEffect(() => {
        dispatch(normalizeConversations());
    });

    useHotkeys('ctrl+enter,cmd+enter', () => {
        dispatch(fetchForCurrentTab());
    }, {filter: () => true});
    useHotkeys('ctrl+1', () => {
        dispatch(updateTabIndex(0));
    });
    useHotkeys('ctrl+2', () => {
        dispatch(updateTabIndex(1));
    });
    useHotkeys('ctrl+3', () => {
        dispatch(updateTabIndex(2));
    });
    useHotkeys('ctrl+4', () => {
        dispatch(updateTabIndex(3));
    });

    return (
        <ThemeProvider theme={theme}>
            <CssBaseline/>

            <ApiKeyDialog/>
            <TemplateDialog/>

            <Header/>

            <Container maxWidth={"lg"}>
                <Box mt={2}>
                    <PromptEditor/>
                </Box>
                {/*<Box mt={2}>
                    <ModeTabs/>
                </Box>*/}
                <Box mt={2}>
                    <Typography>
                        Not affiliated with OpenAI. Feedback: [email protected].</Typography>
                </Box>
            </Container>
        </ThemeProvider>
    );
}