Page component
The "Page" component decraration is inside src/components/Page.js
The "Page" component is the bootstrap point of the whole app and the parent component of the views and pages.
The declaration of the useDarkMode hook, the initialization of the AOS plugin and MUI's ThemeProvider are in the "Page" component.
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import CssBaseline from '@mui/material/CssBaseline';
import getTheme from 'src/theme/index';
import AOS from 'aos';
export const useDarkMode = () => {
...
[The hook logic]
...
return [themeMode, themeToggler, mountedComponent];
};
export default function Page({ children }) {
React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
AOS.init({
once: true,
delay: 50,
duration: 500,
easing: 'ease-in-out',
});
}, []);
const [themeMode, themeToggler, mountedComponent] = useDarkMode();
useEffect(() => {
AOS.refresh();
}, [mountedComponent, themeMode]);
return (
<ThemeProvider theme={getTheme(themeMode, themeToggler)}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Paper elevation={0}>{children}</Paper>
</ThemeProvider>
);
}
Page.propTypes = {
children: PropTypes.node.isRequired,
};
Example of the use of the Page component
import React from 'react';
...
[Other components import]
...
import Page from './components/Page';
const App = () => {
return (
<Page>
<BrowserRouter>
<Routes />
</BrowserRouter>
</Page>
);
};
export default App;© 2019-2024 飞风公司 版权所有
当您访问我们的网站、服务或工具或与之互动时，我们或我们的授权服务提供商可能会使用cookie来存储信息，以帮助您提供更好、更快、更安全的体验，并用于营销目的。