[examples] Fix Joy UI Next.js App Router font loading (#38095)

IgnacioUtrilla · oliviertassinari · web-flow · commit 42fa3162502e · 2023-07-24T17:17:15.000+08:00
Co-authored-by: Olivier Tassinari &lt;olivier.tassinari@gmail.com&gt;
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -167,8 +167,8 @@ const systemFont = [
 
 export const getMetaThemeColor = (mode: 'light' | 'dark') => {
   const themeColor = {
-    light: grey[50],
-    dark: blueDark[800],
+    light: blue[600],
+    dark: blueDark[900],
   };
   return themeColor[mode];
 };
diff --git a/examples/base-next-app-router-tailwind-ts/src/app/page.tsx b/examples/base-next-app-router-tailwind-ts/src/app/page.tsx
@@ -2,20 +2,22 @@ import * as React from 'react';
 import Switch from '@mui/base/Switch';
 import { Select, SelectOption, Slider } from './components';
 
-function Heading({ children }: { children: React.ReactNode }) {
-  return <h2 className="font-bold text-gray-400 uppercase text-base mt-3 mb-2">{children}</h2>;
+function Heading(props: { children: React.ReactNode }) {
+  return (
+    <h2 className="font-bold text-gray-400 uppercase text-base mt-3 mb-2">{props.children}</h2>
+  );
 }
 
-function Section({ children }: { children: React.ReactNode }) {
+function Section(props: { children: React.ReactNode }) {
   return (
     <div className="grid grid-cols-3 grid-rows-[40px] gap-x-16 items-center min-h-[40px] py-1.5 border-t-[1px] border-solid border-gray-700">
-      {children}
+      {props.children}
     </div>
   );
 }
 
-function Label({ children }: { children: React.ReactNode }) {
-  return <h3 className="font-medium leading-none text-gray-300 col-span-2">{children}</h3>;
+function Label(props: { children: React.ReactNode }) {
+  return <h3 className="font-medium leading-none text-gray-300 col-span-2">{props.children}</h3>;
 }
 
 const HOURS = [
@@ -74,7 +76,6 @@ export default function Home() {
             defaultChecked
           />
         </Section>
-
         <Section>
           <Label>Auto-Enable Between</Label>
           <div className="col-span-1 grid grid-cols-[1fr_auto_1fr] items-center">
@@ -95,7 +96,6 @@ export default function Home() {
             </Select>
           </div>
         </Section>
-
         <Section>
           <Label>Night Mode Tint</Label>
           <div className="col-span-1 self-stretch">
diff --git a/examples/joy-next-app-router-ts/src/app/layout.tsx b/examples/joy-next-app-router-ts/src/app/layout.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react';
-import { Public_Sans } from 'next/font/google';
 import ThemeRegistry from '@/components/ThemeRegistry/ThemeRegistry';
 
-const publicSans = Public_Sans({ subsets: ['latin'] });
-
 export const metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
@@ -12,7 +9,7 @@ export const metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={publicSans.className}>
+      <body>
         <ThemeRegistry>{children}</ThemeRegistry>
       </body>
     </html>
diff --git a/examples/joy-next-app-router-ts/src/app/page.tsx b/examples/joy-next-app-router-ts/src/app/page.tsx
@@ -39,15 +39,14 @@ export default function Home() {
           </Typography>
           <Typography level="body2">Sign in to continue.</Typography>
         </div>
-        <FormControl>
+        <FormControl id="email">
           <FormLabel>Email</FormLabel>
           <Input name="email" type="email" placeholder="johndoe@email.com" />
         </FormControl>
-        <FormControl>
+        <FormControl id="password">
           <FormLabel>Password</FormLabel>
           <Input name="password" type="password" placeholder="password" />
         </FormControl>
-
         <Button sx={{ mt: 1 }}>Log in</Button>
         <Typography
           endDecorator={<Link href="/sign-up">Sign up</Link>}
diff --git a/examples/joy-next-app-router-ts/src/components/ThemeRegistry/theme.js b/examples/joy-next-app-router-ts/src/components/ThemeRegistry/theme.js
@@ -1,6 +1,15 @@
+import { Public_Sans } from 'next/font/google';
 import { extendTheme } from '@mui/joy/styles';
 
+const publicSans = Public_Sans({
+  subsets: ['latin'],
+  display: 'swap',
+});
+
 const theme = extendTheme({
+  fontFamily: {
+    body: publicSans.style.fontFamily,
+  },
   components: {
     JoyButton: {
       styleOverrides: {
diff --git a/examples/material-next-app-router-ts/src/app/layout.tsx b/examples/material-next-app-router-ts/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Roboto } from 'next/font/google';
 import Link from 'next/link';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
@@ -26,12 +25,6 @@ export const metadata = {
   description: 'Next.js App Router + Material UI v5',
 };
 
-const roboto = Roboto({
-  variable: '--font-roboto',
-  weight: ['300', '400', '500', '700'],
-  subsets: ['latin'],
-});
-
 const DRAWER_WIDTH = 240;
 
 const LINKS = [
@@ -48,8 +41,8 @@ const PLACEHOLDER_LINKS = [
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={roboto.variable}>
-      <body className={roboto.className}>
+    <html lang="en">
+      <body>
         <ThemeRegistry>
           <AppBar position="fixed" sx={{ zIndex: 2000 }}>
             <Toolbar sx={{ backgroundColor: 'background.paper' }}>
diff --git a/examples/material-next-app-router-ts/src/components/ThemeRegistry/theme.ts b/examples/material-next-app-router-ts/src/components/ThemeRegistry/theme.ts
@@ -1,11 +1,18 @@
+import { Roboto } from 'next/font/google';
 import { createTheme } from '@mui/material/styles';
 
-const defaultTheme = createTheme({
+const roboto = Roboto({
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+});
+
+const theme = createTheme({
   palette: {
     mode: 'light',
   },
   typography: {
-    fontFamily: 'var(--font-roboto)',
+    fontFamily: roboto.style.fontFamily,
   },
   components: {
     MuiAlert: {
@@ -20,4 +27,4 @@ const defaultTheme = createTheme({
   },
 });
 
-export default defaultTheme;
+export default theme;
diff --git a/examples/material-next-ts-v4-v5-migration/pages/_document.tsx b/examples/material-next-ts-v4-v5-migration/pages/_document.tsx
@@ -25,10 +25,6 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
         {/* PWA primary color */}
         <meta name="theme-color" content={theme.palette.primary.main} />
         <link rel="shortcut icon" href="/favicon.ico" />
-        <link
-          rel="stylesheet"
-          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-        />
         {/* Inject MUI styles first to match with the prepend: true configuration. */}
         {emotionStyleTags}
       </Head>
diff --git a/examples/material-next-ts-v4-v5-migration/src/theme.ts b/examples/material-next-ts-v4-v5-migration/src/theme.ts
@@ -1,6 +1,13 @@
+import { Roboto } from 'next/font/google';
 import { createTheme } from '@mui/material/styles';
 import { red } from '@mui/material/colors';
 
+const roboto = Roboto({
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+});
+
 // Create a theme instance.
 const theme = createTheme({
   palette: {
@@ -14,6 +21,9 @@ const theme = createTheme({
       main: red.A400,
     },
   },
+  typography: {
+    fontFamily: roboto.style.fontFamily,
+  },
 });
 
 export default theme;
diff --git a/examples/material-next-ts/src/theme.ts b/examples/material-next-ts/src/theme.ts
@@ -6,7 +6,6 @@ export const roboto = Roboto({
   weight: ['300', '400', '500', '700'],
   subsets: ['latin'],
   display: 'swap',
-  fallback: ['Helvetica', 'Arial', 'sans-serif'],
 });
 
 // Create a theme instance.
diff --git a/examples/material-next/pages/_document.js b/examples/material-next/pages/_document.js
@@ -2,14 +2,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import createEmotionServer from '@emotion/server/create-instance';
-import theme, { roboto } from '../src/theme';
+import theme from '../src/theme';
 import createEmotionCache from '../src/createEmotionCache';
 
 export default function MyDocument(props) {
   const { emotionStyleTags } = props;
 
   return (
-    <Html lang="en" className={roboto.className}>
+    <Html lang="en">
       <Head>
         {/* PWA primary color */}
         <meta name="theme-color" content={theme.palette.primary.main} />
diff --git a/examples/material-next/src/theme.js b/examples/material-next/src/theme.js
@@ -2,11 +2,10 @@ import { Roboto } from 'next/font/google';
 import { createTheme } from '@mui/material/styles';
 import { red } from '@mui/material/colors';
 
-export const roboto = Roboto({
+const roboto = Roboto({
   weight: ['300', '400', '500', '700'],
   subsets: ['latin'],
   display: 'swap',
-  fallback: ['Helvetica', 'Arial', 'sans-serif'],
 });
 
 // Create a theme instance.
