developit · January 19, 2025 05:45
diff --git a/*Preact + Material-UI Example.md b/*Preact + Material-UI Example.md
diff --git a/.gitignore b/.gitignore
 node_modules
 package-lock.json
diff --git a/App.js b/App.js
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 import Link from '@material-ui/core/Link';
 import ProTip from './ProTip';

 function MadeWithLove() {
 	return (
 		<Typography variant="body2" color="textSecondary" align="center">
 			Based on the{' '}
 			<Link href="https://github.com/mui-org/material-ui/tree/master/examples/preact">
 				original example
 			</Link>
 			{' '}by the Material-UI team.
 		</Typography>
 	);
 }

 export default function App() {
 	return (
 		<Container maxWidth="sm">
 			<Box my={4}>
 				<Typography variant="h4" component="h1" gutterBottom>
 					Material UI Preact Example
 				</Typography>
 				<Typography variant="h5" component="h2" gutterBottom>
 					Material UI 7 + Preact X + Preact CLI
 				</Typography>
 				<ProTip />
 				<MadeWithLove />
 			</Box>
 		</Container>
 	);
 }
diff --git a/index.js b/index.js
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/styles';
 import App from './App';
 import theme from './theme';

 export default () => (
 	<div id="app">
 		<ThemeProvider theme={theme}>
 			<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
 			<CssBaseline />
 			<App />
 		</ThemeProvider>
 	</div>
 );
diff --git a/package.json b/package.json
 {
  "name": "preact-mui-example",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.2.1",
    "preact": "^10.0.0-rc.0",
    "preact-render-to-string": "^5.0.6"
  },
  "devDependencies": {
    "eslint": "5.12.0",
    "eslint-config-developit": "^1.1.1",
    "preact-cli": "^3.0.0-rc.3",
    "serve": "^11.1.0"
  },
  "scripts": {
    "start": "preact watch --no-esm",
    "build": "preact build",
    "serve": "serve build -s -n"
  },
  "eslintConfig": {
    "extends": "developit"
  }
 }
diff --git a/ProTip.js b/ProTip.js
 import { makeStyles } from '@material-ui/core/styles';
 import Link from '@material-ui/core/Link';
 import SvgIcon from '@material-ui/core/SvgIcon';
 import Typography from '@material-ui/core/Typography';

 function LightBulbIcon(props) {
 	return (
 		<SvgIcon {...props}>
 			<path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
 		</SvgIcon>
 	);
 }

 const useStyles = makeStyles(theme => ({
 	root: {
 		margin: theme.spacing(6, 0, 3)
 	},
 	lightBulb: {
 		verticalAlign: 'middle',
 		marginRight: theme.spacing(1)
 	}
 }));

 export default function ProTip() {
 	const classes = useStyles();
 	return (
 		<Typography className={classes.root} color="textSecondary">
 			<LightBulbIcon className={classes.lightBulb} />
      Pro tip: See more{' '}
 			<Link href="https://material-ui.com/getting-started/page-layout-examples/" target="_blank">
        page layout examples
 			</Link>{' '}
      on the Material-UI documentation.
 		</Typography>
 	);
 }
diff --git a/theme.js b/theme.js
 import { red } from '@material-ui/core/colors';
 import { createMuiTheme } from '@material-ui/core/styles';

 // A custom theme for this app
 const theme = createMuiTheme({
 	palette: {
 		primary: {
 			main: '#556cd6'
 		},
 		secondary: {
 			main: '#19857b'
 		},
 		error: {
 			main: red.A400
 		},
 		background: {
 			default: '#fff'
 		}
 	}
 });

 export default theme;
	import Container from '@material-ui/core/Container';
	import Typography from '@material-ui/core/Typography';
	import Box from '@material-ui/core/Box';
	import Link from '@material-ui/core/Link';
	import ProTip from './ProTip';

	function MadeWithLove() {
	return (
	<Typography variant="body2" color="textSecondary" align="center">
	Based on the{' '}
	<Link href="https://github.com/mui-org/material-ui/tree/master/examples/preact">
	original example
	</Link>
	{' '}by the Material-UI team.
	</Typography>
	);
	}

	export default function App() {
	return (
	<Container maxWidth="sm">
	<Box my={4}>
	<Typography variant="h4" component="h1" gutterBottom>
	Material UI Preact Example
	</Typography>
	<Typography variant="h5" component="h2" gutterBottom>
	Material UI 7 + Preact X + Preact CLI
	</Typography>
	<ProTip />
	<MadeWithLove />
	</Box>
	</Container>
	);
	}
	import CssBaseline from '@material-ui/core/CssBaseline';
	import { ThemeProvider } from '@material-ui/styles';
	import App from './App';
	import theme from './theme';

	export default () => (
	<div id="app">
	<ThemeProvider theme={theme}>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
	<CssBaseline />
	<App />
	</ThemeProvider>
	</div>
	);
	{
	"name": "preact-mui-example",
	"version": "1.0.0",
	"private": true,
	"dependencies": {
	"@material-ui/core": "^4.2.1",
	"preact": "^10.0.0-rc.0",
	"preact-render-to-string": "^5.0.6"
	},
	"devDependencies": {
	"eslint": "5.12.0",
	"eslint-config-developit": "^1.1.1",
	"preact-cli": "^3.0.0-rc.3",
	"serve": "^11.1.0"
	},
	"scripts": {
	"start": "preact watch --no-esm",
	"build": "preact build",
	"serve": "serve build -s -n"
	},
	"eslintConfig": {
	"extends": "developit"
	}
	}
	import { makeStyles } from '@material-ui/core/styles';
	import Link from '@material-ui/core/Link';
	import SvgIcon from '@material-ui/core/SvgIcon';
	import Typography from '@material-ui/core/Typography';

	function LightBulbIcon(props) {
	return (
	<SvgIcon {...props}>
	<path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
	</SvgIcon>
	);
	}

	const useStyles = makeStyles(theme => ({
	root: {
	margin: theme.spacing(6, 0, 3)
	},
	lightBulb: {
	verticalAlign: 'middle',
	marginRight: theme.spacing(1)
	}
	}));

	export default function ProTip() {
	const classes = useStyles();
	return (
	<Typography className={classes.root} color="textSecondary">
	<LightBulbIcon className={classes.lightBulb} />
	Pro tip: See more{' '}
	<Link href="https://material-ui.com/getting-started/page-layout-examples/" target="_blank">
	page layout examples
	</Link>{' '}
	on the Material-UI documentation.
	</Typography>
	);
	}
	import { red } from '@material-ui/core/colors';
	import { createMuiTheme } from '@material-ui/core/styles';

	// A custom theme for this app
	const theme = createMuiTheme({
	palette: {
	primary: {
	main: '#556cd6'
	},
	secondary: {
	main: '#19857b'
	},
	error: {
	main: red.A400
	},
	background: {
	default: '#fff'
	}
	}
	});

	export default theme;