@material-ui/core#CssBaseline TypeScript Examples
The following examples show how to use
@material-ui/core#CssBaseline.
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.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 #2
| 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 #3
| Source File: Questionnaire.tsx From flect-chime-sdk-demo with Apache License 2.0 | 6 votes |
|
Questionnaire = (props: QuestionnaireProps) => {
const classes = useStyles();
const links = props.links.map((x) => {
return (
<Link key={x.title} onClick={x.onClick}>
{x.title}
</Link>
);
});
return (
<Container maxWidth="xs" className={classes.root}>
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>{props.avatorIcon}</Avatar>
<Typography variant="h4" className={classes.title}>
{props.title}
</Typography>
<div>{props.forms}</div>
<Divider style={{ width: "50%" }} />
<div style={{ display: "flex", flexDirection: "column" }}>{links}</div>
<Divider style={{ width: "50%" }} />
<Copyright />
</div>
</Container>
);
}
Example #4
| Source File: index.tsx From twilio-voice-notification-app with Apache License 2.0 | 6 votes |
|
ReactDOM.render(
<ErrorBoundary>
<Provider store={store}>
<CssBaseline />
<Header />
<MainContainer maxWidth="lg">
<Router>
<HttpProvider>
<Switch>
<PrivateRoute
component={CreateBroadcast}
exact={false}
path="/create"
/>
<PrivateRoute
component={BroadcastList}
exact
path="/broadcasts"
/>
<PrivateRoute
component={BroadcastDetail}
exact
path="/broadcasts/:broadcastId"
/>
<Route component={Login} exact path="/login" />
<Route component={Login} exact path="/" />
</Switch>
</HttpProvider>
</Router>
</MainContainer>
</Provider>
</ErrorBoundary>,
document.getElementById('root')
);
Example #5
| Source File: index.tsx From rusty-chat with MIT License | 6 votes |
|
ReactDOM.render(
<React.StrictMode>
<CssBaseline/>
<Provider store={store}>
<ConnectedRouter history={history}>
<App/>
</ConnectedRouter>
</Provider>
</React.StrictMode>,
document.getElementById('root'),
);
Example #6
| 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 #7
| 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 #8
| Source File: Root.tsx From office-booker with MIT License | 6 votes |
|
Root: React.FC = () => (
<StylesProvider injectFirst>
<StyledThemeProvider theme={MaterialTheme}>
<MaterialThemeProvider theme={MaterialTheme}>
<CssBaseline />
<StyledGlobal />
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<ErrorBoundary>
<AppProvider>
<Structure>
<Routes />
</Structure>
</AppProvider>
</ErrorBoundary>
</MuiPickersUtilsProvider>
</MaterialThemeProvider>
</StyledThemeProvider>
</StylesProvider>
)
Example #9
| Source File: App.tsx From mo360-ftk with MIT License | 6 votes |
|
swidget: ISwidget = (): JSX.Element => {
return (
<App name="My-App" init={init} config={config}>
<MuiThemeProvider theme={theme}>
<CssBaseline>
<TranslationProvider translations={TranslationsI18n}>
<Route />
</TranslationProvider>
</CssBaseline>
</MuiThemeProvider>
</App>
);
}
Example #10
| Source File: index.stories.tsx From react-planet with MIT License | 6 votes |
|
withTheme = (component: any) => {
return (
<ThemeProvider theme={theme}>
{/* Reboot kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
{component}
</ThemeProvider>
);
}
Example #11
| Source File: App.tsx From planning-poker with MIT License | 6 votes |
|
function App() {
return (
<div className="LightTheme">
<ThemeProvider theme={theme} >
<StylesProvider injectFirst>
<CssBaseline />
<Router>
<Toolbar />
<Switch>
<Route path='/game/:id' component={GamePage} />
<Route path='/join/:id' component={HomePage} />
<Route exact path='/*' component={HomePage} />
</Switch>
</Router>
</StylesProvider>
</ThemeProvider>
</div>
);
}
Example #12
| 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 #13
| Source File: index.tsx From github-deploy-center with MIT License | 6 votes |
|
ReactDOM.render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Provider value={overmind}>
<App />
</Provider>
</MuiThemeProvider>
<ReactQueryDevtools />
</QueryClientProvider>
</React.StrictMode>,
document.getElementById('root')
)
Example #14
| 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 #15
| Source File: _app.tsx From Demae with MIT License | 6 votes |
|
App = ({ Component, pageProps, router }: AppProps) => {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Provider>
<Router location={router.asPath}>
<Component {...pageProps} />
</Router >
</Provider>
</ThemeProvider>
)
}
Example #16
| Source File: index.tsx From akashlytics with GNU General Public License v3.0 | 6 votes |
|
ReactDOM.render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<CssBaseline />
<QueryClientProvider client={queryClient}>
<IntlProvider locale={navigator.language}>
<HelmetProvider>
<SnackbarProvider maxSnack={3} dense hideIconVariant>
<MediaQueryProvider>
<Router>
<ScrollToTop />
<App />
</Router>
</MediaQueryProvider>
</SnackbarProvider>
</HelmetProvider>
</IntlProvider>
</QueryClientProvider>
</ThemeProvider>
</React.StrictMode>,
document.getElementById("root")
);
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: _app.tsx From Teyvat.moe with GNU General Public License v3.0 | 6 votes |
|
_app: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
// TODO: Remove server-side JSS styles.
// Normally you'd call 'useEffect' to call jssStyles.parentElement.removeChild(jssStyles);
// However, I was experiencing an unknown bug where the old class names weren't being replaced
// with the new ones, so I just got rid of the call so that the old class names would work.
return (
<>
{/* StoreProvider allows hooks and components to access the Redux store. */}
<StoreProvider store={store}>
{/* ThemeProvider allows for child components to access the Material UI theme. */}
<ThemeProvider theme={Theme}>
{/* CSSBaseline injects a basic cascading style sheet for use by Material UI styling. */}
<CssBaseline />
{/* NotificationProvider handles the Notistack.
Must be a child of StoreProvider since Redux handles notifications. */}
<StylesProvider generateClassName={generateClassName}>
<NotificationProvider>
{/* ErrorHandler provides a fallback interface to use if the web page crashes. */}
<ErrorHandler errorHandler={FullPageErrorHandler}>
{/* Component provides the actual map content. */}
<Component {...pageProps} />
</ErrorHandler>
</NotificationProvider>
</StylesProvider>
</ThemeProvider>
</StoreProvider>
</>
);
}
Example #19
| Source File: MainView.tsx From ow-mod-manager with MIT License | 6 votes |
|
MainView = () => {
const styles = useStyles();
const selectedTab = useRecoilValue(selectedTabState);
useProtocol();
return (
<CssBaseline>
<div className={styles.wrapper}>
<TopBar />
<AppAlert />
<LoadingBar />
{tabList.map(
(tab) =>
tabList[selectedTab].name === tab.name && (
<ErrorBoundary>
<LoadingSuspense key={tab.name}>
<tab.component />
</LoadingSuspense>
</ErrorBoundary>
)
)}
</div>
</CssBaseline>
);
}
Example #20
| Source File: App.tsx From interface-v2 with GNU General Public License v3.0 | 6 votes |
|
Providers: React.FC = ({ children }) => {
return (
<div>
<Suspense fallback={<Background fallback={true} />}>
<ThemeProvider>
<CssBaseline />
{children}
</ThemeProvider>
</Suspense>
</div>
);
}
Example #21
| Source File: Home.tsx From The-TypeScript-Workshop with MIT License | 6 votes |
|
Home = () => {
const classes = useStyles();
const { stories } = useContext(StoriesContext);
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Typography component="h1" variant="h5">
Latest Stories
</Typography>
<div className={classes.root}>
<List component="span" aria-label="stories">
{stories?.map((s) => (
<ListItem key={s.timestamp}>
<Story {...s} />
</ListItem>
))}
</List>
</div>
</div>
</Container>
);
}
Example #22
| 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 #23
| Source File: NotesPanelWebview.tsx From vscode-crossnote with GNU Affero General Public License v3.0 | 5 votes |
|
ReactDOM.render(
<ThemeProvider theme={selectedTheme.muiTheme}>
<CssBaseline></CssBaseline>
<NotesPanel></NotesPanel>
</ThemeProvider>,
document.getElementById("root")
);
Example #24
| Source File: Main.tsx From UsTaxes with GNU Affero General Public License v3.0 | 5 votes |
|
export default function Main(): ReactElement {
const activeYear: TaxYear = useSelector(
(state: YearsTaxesState) => state.activeYear
)
const classes = useStyles({ isMobile })
const steps: SectionItem[] = drawerSectionsForYear(activeYear).flatMap(
(section: Section) => section.items
)
const allItems: SectionItem[] = [...steps, ...backPages]
const Layout = ({
showMenu = true,
children
}: PropsWithChildren<{ showMenu?: boolean }>) => (
<>
{showMenu ? <Menu /> : undefined}
<Grid
component="main"
tabIndex={-1}
container
justifyContent="center"
direction="row"
>
<Grid item sm={12} md={8} lg={6}>
{showMenu ? (
<Grid item className={classes.content}>
{' '}
<YearStatusBar />
</Grid>
) : undefined}
<Grid item className={classes.content}>
{isMobile && showMenu ? (
<div className={classes.toolbar} />
) : undefined}
{children}
</Grid>
</Grid>
</Grid>
</>
)
return (
<>
<CssBaseline />
<SkipToLinks />
<div className={classes.container}>
<StateLoader />
<PagerProvider pages={steps}>
<Routes>
<Route path="/" element={<Navigate to={Urls.default} />} />
{allItems.map((item) => (
<Route
key={item.title}
path={item.url}
element={
<Layout showMenu={!item.url.includes('start')}>
<DataPropagator />
{item.element}
</Layout>
}
/>
))}
<Route
path="*"
element={
<Layout>
<NoMatchPage />
</Layout>
}
/>
</Routes>
</PagerProvider>
{!isMobile && <ScrollTop />}
</div>
</>
)
}
Example #25
| Source File: MuiDecorator.tsx From log4brains with Apache License 2.0 | 5 votes |
|
export function MuiDecorator({ children }: Props) {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
);
}
Example #26
| 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>
);
}
Example #27
| Source File: App.tsx From End-to-End-Web-Testing-with-Cypress with MIT License | 5 votes |
|
App: React.FC = () => {
const classes = useStyles();
const [authState] = useService(authService);
const [, , notificationsService] = useMachine(notificationsMachine);
const [, , snackbarService] = useMachine(snackbarMachine);
const [, , bankAccountsService] = useMachine(bankAccountsMachine);
const isLoggedIn =
authState.matches("authorized") ||
authState.matches("refreshing") ||
authState.matches("updating");
return (
<div className={classes.root}>
<CssBaseline />
{isLoggedIn && (
<PrivateRoutesContainer
isLoggedIn={isLoggedIn}
notificationsService={notificationsService}
authService={authService}
snackbarService={snackbarService}
bankAccountsService={bankAccountsService}
/>
)}
{authState.matches("unauthorized") && (
<Switch>
<Route exact path="/signup">
<SignUpForm authService={authService} />
</Route>
<Route exact path="/signin">
<SignInForm authService={authService} />
</Route>
<Route path="/*">
<Redirect
to={{
pathname: "/signin",
}}
/>
</Route>
</Switch>
)}
<AlertBar snackbarService={snackbarService} />
</div>
);
}
Example #28
| Source File: App.tsx From shadowsocks-electron with GNU General Public License v3.0 | 5 votes |
|
App: React.FC = () => {
const styles = useStyles();
const darkMode = persistStore.get('darkMode') === 'true';
const [theme] = useTheme(darkMode ? 'dark' : 'light');
useEffect(() => {
getConnectionStatus((status) => {
store.dispatch({
type: SET_STATUS,
key: "connected",
value: status
});
});
MessageChannel.invoke('main', 'service:desktop', {
action: 'setLocale',
params: getFirstLanguage(persistStore.get('lang') as string)
});
}, []);
return (
<Provider store={store}>
<PersistGate loading={<Loading />} persistor={persistor}>
<ThemeProvider theme={theme}>
<SnackbarProvider
maxSnack={3}
anchorOrigin={ {horizontal: 'center', vertical: 'top'} }
autoHideDuration={2e3}
>
<HashRouter>
<div className={styles.root}>
<CssBaseline />
<AppNav />
<main className={styles.content}>
<div className={styles.toolbar} />
<RouterComp />
</main>
</div>
</HashRouter>
</SnackbarProvider>
</ThemeProvider>
</PersistGate>
</Provider>
);
}
Example #29
| Source File: Add.tsx From The-TypeScript-Workshop with MIT License | 5 votes |
|
Add = () => {
const { addStory } = useContext(StoriesContext);
const classes = useStyles();
const [title, setTitle] = useState('');
const [link, setLink] = useState('');
const history = useHistory();
const user = useContext(UserContext);
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
const { name, value } = event.target;
switch (name) {
case 'link':
setLink(value);
break;
case 'title':
setTitle(value);
break;
}
};
const handleSubmit = async () => {
if (link && title && user?.email) {
await addStory!({
link,
title,
user: user.email,
timestamp: Date.now(),
});
history.push('/');
}
};
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Typography component="h1" variant="h5">
Add a Story
</Typography>
<div className={classes.form}>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="title"
label="Title"
name="title"
autoComplete="title"
autoFocus
onChange={handleChange}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="link"
label="Link"
name="link"
autoComplete="link"
autoFocus
onChange={handleChange}
/>
</div>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={handleSubmit}
>
Submit
</Button>
</div>
</Container>
);
}
