how2ice/react-test
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

init project
Some checks failed
No response / noResponse (push) Has been cancelled
Details
CI / Continuous releases (push) Has been cancelled
Details
CI / test-dev (macos-latest) (push) Has been cancelled
Details
CI / test-dev (ubuntu-latest) (push) Has been cancelled
Details
CI / test-dev (windows-latest) (push) Has been cancelled
Details
Maintenance / main (push) Has been cancelled
Details
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
Details
CodeQL / Analyze (push) Has been cancelled
Details

Browse Source
This commit is contained in:
how2ice
2025-12-12 14:26:25 +09:00
commit 005cf56baf
43188 changed files with 1079531 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
examples/material-ui-nextjs-ts-v4-v5-migration/pages/_app.tsx Normal file
View File

@@ -0,0 +1,32 @@
import * as React from 'react';
import Head from 'next/head';
import { AppProps } from 'next/app';
import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '../src/theme';
export default function MyApp(props: AppProps) {
const { Component, pageProps } = props;
React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles?.parentElement?.removeChild(jssStyles);
}
}, []);
return (
<AppCacheProvider {...props}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</AppCacheProvider>
);
}

96
examples/material-ui-nextjs-ts-v4-v5-migration/pages/_document.tsx Normal file
View File

@@ -0,0 +1,96 @@
import * as React from 'react';
import {
Html,
Head,
Main,
NextScript,
DocumentProps,
DocumentInitialProps,
DocumentContext,
} from 'next/document';
import { AppProps } from 'next/app';
import {
DocumentHeadTags,
DocumentHeadTagsProps,
documentGetInitialProps,
} from '@mui/material-nextjs/v14-pagesRouter';
import { ServerStyleSheets as JSSServerStyleSheets } from '@mui/styles';
import theme from '../src/theme';
export default function MyDocument(props: DocumentProps & DocumentHeadTagsProps) {
return (
<Html lang="en">
<Head>
{/* PWA primary color */}
<meta name="theme-color" content={theme.palette.primary.main} />
<link rel="icon" href="/favicon.ico" />
<DocumentHeadTags {...props} />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
// You can find a benchmark of the available CSS minifiers under
// https://github.com/GoalSmashers/css-minification-benchmark
// We have found that clean-css is faster than cssnano but the output is larger.
// Waiting for https://github.com/cssinjs/jss/issues/279
// 4% slower but 12% smaller output than doing it in a single step.
//
// It's using .browserslistrc
let prefixer: any;
let cleanCSS: any;
if (process.env.NODE_ENV === 'production') {
/* eslint-disable global-require */
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const CleanCSS = require('clean-css');
/* eslint-enable global-require */
prefixer = postcss([autoprefixer]);
cleanCSS = new CleanCSS();
}
MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const jssSheets = new JSSServerStyleSheets();
const finalProps = await documentGetInitialProps(ctx, {
plugins: [
{
enhanceApp: (App: React.ComponentType<AppProps>) =>
function EnhanceApp(props: AppProps) {
return jssSheets.collect(<App {...props} />);
},
resolveProps: async (initialProps: DocumentInitialProps) => {
// Generate the css string for the styles coming from jss
let css = jssSheets.toString();
// It might be undefined, for example after an error.
if (css && process.env.NODE_ENV === 'production') {
const result1 = await prefixer.process(css, { from: undefined });
css = result1.css;
css = cleanCSS.minify(css).styles;
}
return {
...initialProps,
styles: [
...(Array.isArray(initialProps.styles) ? initialProps.styles : [initialProps.styles]),
<style
id="jss-server-side"
key="jss-server-side"
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: css }}
/>,
...React.Children.toArray(initialProps.styles),
],
};
},
},
],
});
return finalProps;
};

40
examples/material-ui-nextjs-ts-v4-v5-migration/pages/about.tsx Normal file
View File

@@ -0,0 +1,40 @@
import * as React from 'react';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import { makeStyles } from '@mui/styles';
import { Link } from '../src/Link';
import ProTip from '../src/ProTip';
import Copyright from '../src/Copyright';
const useStyles = makeStyles((theme) => ({
main: {
marginTop: theme.spacing(4),
marginBottom: theme.spacing(4),
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
}));
export default function About() {
const classes = useStyles();
return (
<Container maxWidth="lg">
<div className={classes.main}>
<Typography variant="h4" component="h1" sx={{ mb: 2 }}>
Material UI - Next.js example in TypeScript with legacy @mui/styles
</Typography>
<Box sx={{ maxWidth: 'sm' }}>
<Button variant="contained" component={Link} noLinkStyle href="/">
Go to the home page
</Button>
</Box>
<ProTip />
<Copyright />
</div>
</Container>
);
}

37
examples/material-ui-nextjs-ts-v4-v5-migration/pages/index.tsx Normal file
View File

@@ -0,0 +1,37 @@
import * as React from 'react';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import { makeStyles } from '@mui/styles';
import { Link } from '../src/Link';
import ProTip from '../src/ProTip';
import Copyright from '../src/Copyright';
const useStyles = makeStyles((theme) => ({
main: {
marginTop: theme.spacing(4),
marginBottom: theme.spacing(4),
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
}));
export default function Home() {
const classes = useStyles();
return (
<Container maxWidth="lg">
<div className={classes.main}>
<Typography variant="h4" component="h1" sx={{ mb: 2 }}>
Material UI - Next.js example in TypeScript with legacy @mui/styles
</Typography>
<Link href="/about" color="secondary">
Go to the about page
</Link>
<ProTip />
<Copyright />
</div>
</Container>
);
}