Created empty project

src/App.styles.ts

@@ -0,0 +1,21 @@
+import { makeStyles } from "./Utils/makeStyles";
+
+/**
+ * Stylesheet for the App component.
+ */
+const AppStyles = makeStyles(theme => ({
+	root:
+	{
+		display: "flex",
+		flexFlow: "column",
+		height: "100%",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	caption:
+	{
+		marginTop: theme.spacing(2),
+	},
+}));
+
+export default AppStyles;

src/App.tsx

@@ -0,0 +1,28 @@
+import { Button, Container, GlobalStyles, Theme, ThemeProvider, Typography, createTheme } from "@mui/material";
+import { useState } from "react";
+import useStyles from "./App.styles";
+
+const theme: Theme = createTheme();
+
+/**
+ * The main application component.
+ */
+function App(): JSX.Element
+{
+	const sx = useStyles();
+	const [clicks, setClicks] = useState<number>(0);
+
+	return (
+		<ThemeProvider theme={ theme }>
+			<GlobalStyles styles={ { "body, #root": { height: "100vh", margin: 0 } } } />
+
+			<Container sx={ sx.root }>
+				<Typography variant="h1" gutterBottom>Hello World!</Typography>
+				<Button variant="contained" color="primary" onClick={ () => setClicks(clicks + 1) }>Click me</Button>
+				<Typography variant="body1" sx={ sx.caption }>Times clicked: { clicks }</Typography>
+			</Container>
+		</ThemeProvider>
+	);
+}
+
+export default App;

src/Utils/makeStyles.ts

@@ -0,0 +1,15 @@
+import { SxProps, Theme, useTheme } from "@mui/material";
+
+/**
+ * Utility function that allows to create SxProps stylesheets outside of the component.
+ * @param styles Your stylesheet. A function that takes a theme and returns a SxProps object.
+ * @returns A react hook that returns the SxProps object.
+ */
+const makeStyles = <T>(styles: (theme: Theme) => Record<keyof T, SxProps>) =>
+	(): Record<keyof T, SxProps> =>
+	{
+		const theme = useTheme();
+		return styles(theme);
+	};
+
+export { makeStyles };

src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+);

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />