@mui/material/styles#StyledEngineProvider TypeScript Examples
The following examples show how to use
@mui/material/styles#StyledEngineProvider.
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: index.tsx From mojito_pdm with Creative Commons Attribution Share Alike 4.0 International | 6 votes |
|
ReactDOM.render(
<StyledEngineProvider injectFirst>
<RecoilRoot>
<App/>
</RecoilRoot>
</StyledEngineProvider>,
document.getElementById('root')
);
Example #2
| Source File: index.tsx From cli with Apache License 2.0 | 6 votes |
|
root.render(
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<App />
</ThemeProvider>
</StyledEngineProvider>
);
Example #3
| Source File: index.tsx From console with GNU Affero General Public License v3.0 | 6 votes |
|
root.render(
<React.StrictMode>
<Provider store={store}>
<GlobalCss />
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<Routes />
</ThemeProvider>
</StyledEngineProvider>
</Provider>
</React.StrictMode>
);
Example #4
| Source File: App.tsx From abrechnung with GNU Affero General Public License v3.0 | 5 votes |
|
export default function App() {
const darkModeSystem = useMediaQuery("(prefers-color-scheme: dark)");
const userThemeSettings = useRecoilValue(themeSettings);
const useDarkMode: PaletteMode =
userThemeSettings.darkMode === "browser" ? (darkModeSystem ? "dark" : "light") : userThemeSettings.darkMode;
const theme = useMemo(
() =>
createTheme({
palette: {
mode: useDarkMode,
},
}),
[useDarkMode]
);
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<CssBaseline />
<LocalizationProvider dateAdapter={DateAdapter}>
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
<Router>
<Switch>
{routes.map((route) => {
const authRoute = route.auth ? (
<AuthenticatedRoute>{route.component}</AuthenticatedRoute>
) : (
route.component
);
const layoutRoute =
route.layout === undefined || route.layout ? (
<Layout>
<Suspense fallback={<Loading />}>{authRoute}</Suspense>
</Layout>
) : (
<Suspense fallback={<Loading />}>{authRoute}</Suspense>
);
return (
<Route
key={route.path}
exact={route.exact !== undefined && route.exact}
path={route.path}
>
{layoutRoute}
</Route>
);
})}
</Switch>
</Router>
</LocalizationProvider>
</ThemeProvider>
</StyledEngineProvider>
);
}
Example #5
| Source File: index.tsx From houston with MIT License | 5 votes |
|
function ThemeProvider({
theme = defaultTheme,
children,
disableCssBaseline,
disabledFontBase,
disableToast
}: IThemeProviderProps) {
const [muiTheme] = React.useState(() => generateTheme(theme));
const [styleContent] = React.useState(() => ({
__html: `
form { width: 100%; }
a { text-decoration: none; }
.houston-icon { line-height: 0; }
${
!disabledFontBase &&
`
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700');
body {
font-family: ${theme.font.family.base};
font-size: ${theme.font.size.xs};
-webkit-font-smoothing: auto;
}
`
}
`
}));
React.useEffect(() => setCurrentTheme(theme), [theme]);
return (
<StyledEngineProvider injectFirst>
<MUIThemeProvider theme={muiTheme}>
<LocalizationProvider locale={ptBR} dateAdapter={AdapterDateFns}>
<PopoverRoot>
<style dangerouslySetInnerHTML={styleContent} />
{!disableToast && <ToastContainer />}
{!disableCssBaseline && <CssBaseline />}
{children}
</PopoverRoot>
</LocalizationProvider>
</MUIThemeProvider>
</StyledEngineProvider>
);
}
Example #6
| Source File: App.tsx From Tachidesk-WebUI with Mozilla Public License 2.0 | 4 votes |
|
export default function App() {
const [darkTheme, setDarkTheme] = useLocalStorage<boolean>(
'darkTheme',
true,
);
const darkThemeContext = {
darkTheme,
setDarkTheme,
};
const theme = React.useMemo(
() => createTheme({
palette: {
mode: darkTheme ? 'dark' : 'light',
},
components: {
MuiCssBaseline: {
styleOverrides: `
*::-webkit-scrollbar {
width: 10px;
background: ${darkTheme ? '#222' : '#e1e1e1'};
}
*::-webkit-scrollbar-thumb {
background: ${darkTheme ? '#111' : '#aaa'};
border-radius: 5px;
}
`,
},
},
}),
[darkTheme],
);
return (
<Router>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<QueryParamProvider ReactRouterRoute={Route}>
<LibraryOptionsContextProvider>
<NavBarContextProvider>
<CssBaseline />
<DefaultNavBar />
<Container
id="appMainContainer"
maxWidth={false}
disableGutters
sx={{
mt: 8,
ml: { sm: 8 },
mb: { xs: 8, sm: 0 },
width: 'auto',
overflow: 'auto',
}}
>
<Switch>
{/* General Routes */}
<Route
exact
path="/"
render={() => (
<Redirect to="/library" />
)}
/>
<Route path="/settings/about">
<About />
</Route>
<Route path="/settings/categories">
<Categories />
</Route>
<Route path="/settings/backup">
<Backup />
</Route>
<Route path="/settings">
<DarkTheme.Provider
value={darkThemeContext}
>
<Settings />
</DarkTheme.Provider>
</Route>
{/* Manga Routes */}
<Route path="/sources/:sourceId/popular/">
<SourceMangas popular />
</Route>
<Route path="/sources/:sourceId/latest/">
<SourceMangas popular={false} />
</Route>
<Route path="/sources/:sourceId/configure/">
<SourceConfigure />
</Route>
<Route path="/sources/all/search/">
<SearchAll />
</Route>
<Route path="/downloads">
<DownloadQueue />
</Route>
<Route path="/manga/:mangaId/chapter/:chapterNum">
<></>
</Route>
<Route path="/manga/:id">
<Manga />
</Route>
<Route path="/library">
<Library />
</Route>
<Route path="/updates">
<Updates />
</Route>
<Route path="/sources">
<Sources />
</Route>
<Route path="/extensions">
<Extensions />
</Route>
<Route path="/browse">
<Browse />
</Route>
</Switch>
</Container>
<Switch>
<Route
path="/manga/:mangaId/chapter/:chapterIndex"
// passing a key re-mounts the reader when changing chapters
render={(props: any) => (
<Reader
key={
props.match.params
.chapterIndex
}
/>
)}
/>
</Switch>
</NavBarContextProvider>
</LibraryOptionsContextProvider>
</QueryParamProvider>
</ThemeProvider>
</StyledEngineProvider>
</Router>
);
}
Example #7
| Source File: App.tsx From react-flight-tracker with MIT License | 4 votes |
|
App: React.FC = () => {
// States
const [themeName, setThemeName] = useState(ThemeKeys.DarkTheme);
const getTheme = () => {
switch (themeName) {
case ThemeKeys.DarkTheme: {
return DarkTheme;
};
case ThemeKeys.LightTheme: {
return LightTheme;
};
case ThemeKeys.PineappleTheme: {
return PineappleTheme;
};
default:
return DarkTheme;
};
};
const handleThemeChange = (themeName: string) => {
setThemeName(themeName);
};
const handleInjectCustomServices = () => {
var services: Array<IService> = [];
var openSkyAPIService = new OpenSkyAPIService(process.env.REACT_APP_OSKY_USERNAME, process.env.REACT_APP_OSKY_PASSWORD);
services.push(openSkyAPIService);
var geospatialService = new GeospatialService();
services.push(geospatialService);
return services;
};
const renderFallback = () => {
const theme = getTheme();
return (
<Box
sx={{
height: '100vh',
width: '100vw',
overflow: 'hidden',
userSelect: 'none',
display: 'flex',
flexDirection: 'column'
}}>
<ViewContainer
isScrollLocked={true}>
<Indicator1
color={theme.palette.primary.main}
scale={4.0} />
</ViewContainer>
</Box>
);
};
return (
<BrowserRouter>
<StyledEngineProvider
injectFirst={true}>
<ThemeProvider
theme={getTheme()}>
<Suspense
fallback={renderFallback()}>
<SystemContextProvider
onInjectCustomServices={handleInjectCustomServices}>
<AppContextProvider
onThemeChange={handleThemeChange}>
<CssBaseline />
<RouterPage />
</AppContextProvider>
</SystemContextProvider>
</Suspense>
</ThemeProvider>
</StyledEngineProvider>
</BrowserRouter>
);
}
