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