diff --git a/CHANGELOG.md b/CHANGELOG.md index 50dd6119629e7b..83622297e4c68a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -670,7 +670,7 @@ _Jul 11, 2023_ A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨: -- đź’« Material UI, Joy UI, and Base UI are compatible with [NextJS App Router](https://nextjs.org/docs/app) (#37656) @mj12albert +- đź’« Material UI, Joy UI, and Base UI are compatible with [Next.js App Router](https://nextjs.org/docs/app) (#37656) @mj12albert - đź“š Added new guides for integrating with Next.js 13 App Router (#37656) @mj12albert - Ⓜ️ [Material UI guide](https://mui.com/material-ui/guides/next-js-app-router/) - đź…™ [Joy UI guide](https://mui.com/joy-ui/integrations/next-js-app-router/) @@ -1959,7 +1959,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[docs][joy] List slots in API documentation (#36271) @hbjORbj - ​[docs][joy] Build API documentations (#36008) @hbjORbj - ​[examples] Update Next.js examples to use built-in font (#36315) @Juneezee -- ​[examples] Update curl link in `material-next-ts-v4-v5-migration` example README (#36321) @ZeeshanTamboli +- ​[examples] Update curl link in `material-ui-nextjs-ts-v4-v5-migration` example README (#36321) @ZeeshanTamboli - ​[examples] Convert Next.js \_document class components to function components (#36109) @ossan-engineer ### Core diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md index 44fc18d275867c..c4600dfeaa9e10 100644 --- a/CHANGELOG.old.md +++ b/CHANGELOG.old.md @@ -5571,7 +5571,7 @@ Here are some highlights ✨: - [Tooltip] Suppress warning if button is disabled and title is empty (#13785) @rfbotto - [Dialog] Warn if className in PaperProps is set (#13797) @eps1lon - [TextField] Fix textfield label position when empty (#13791) @Studio384 -- [Popper] Save 7 KB gzipped (for people only using it) (#13804) @oliviertassinari +- [Popper] Save 7 kB gzipped (for people only using it) (#13804) @oliviertassinari - [Modal] Handle modal mount interruption (#13778) @amensouissi - [Select] Make value prop required in TypeScript (#13810) @t49tran - [Popover] Fix onEntering event propagation (#13821) @ekoeditaa @@ -5788,7 +5788,7 @@ This new package is a significant step forward. Some of the key features: - Supports 4 different APIs: hooks, styled-components, higher-order components and render props. - Allow accessing the component's props from within the style object. - Replace the usage of the old React APIs with the new ones. -- 15.0 KB gzipped. +- 15.0 kB gzipped. Here is an example: https://codesandbox.io/s/vjzn5z4k77. @@ -9898,7 +9898,7 @@ Here are some highlights ✨: - New InputAdornment component (#8504). - New [Frequently asked questions](https://github.com/mui/material-ui/blob/4df547d56448cedf70977d6e2463b38eaf64d1c7/docs/src/pages/getting-started/frequently-asked-questions.md) documentation section -- We have saved 1 KB gzip by removing our internal react-transition-group fork (#8785). +- We have saved 1 kB gzip by removing our internal react-transition-group fork (#8785). - We have made one step further in order to upgrade all our development dependencies to react@16 (#8804). ### Breaking change diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx index 9d30ec1b9fcea1..d0dc35646e2b36 100644 --- a/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx +++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx @@ -417,7 +417,7 @@ export default function MyProfile() { } fileName="Tech design requirements.pdf" - fileSize="200 KB" + fileSize="200 kB" progress={100} /> (array: readonly T[], comparator: (a: T, b: T) => number) function formatSize(size: number) { const kb = size / 1000; if (kb < 1000) { - return `${kb.toFixed(1)} KB`; + return `${kb.toFixed(1)} kB`; } return `${(kb / 1000).toFixed(0)} MB`; } diff --git a/examples/base-ui-cra-ts/package.json b/examples/base-ui-cra-ts/package.json index d62f1eb7e90948..427498085b9f0c 100644 --- a/examples/base-ui-cra-ts/package.json +++ b/examples/base-ui-cra-ts/package.json @@ -1,5 +1,5 @@ { - "name": "base-cra-ts", + "name": "base-ui-cra-ts", "version": "5.0.0", "private": true, "dependencies": { diff --git a/examples/base-ui-cra/package.json b/examples/base-ui-cra/package.json index 5ab64614e1f41a..b7367974062f6c 100644 --- a/examples/base-ui-cra/package.json +++ b/examples/base-ui-cra/package.json @@ -1,5 +1,5 @@ { - "name": "base-cra", + "name": "base-ui-cra", "version": "5.0.0", "private": true, "dependencies": { diff --git a/examples/base-ui-nextjs-tailwind-ts/README.md b/examples/base-ui-nextjs-tailwind-ts/README.md index c40298f9086b68..d874cc6012cbed 100644 --- a/examples/base-ui-nextjs-tailwind-ts/README.md +++ b/examples/base-ui-nextjs-tailwind-ts/README.md @@ -13,22 +13,24 @@ curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip cd base-ui-nextjs-tailwind-ts ``` -Install dependencies and run: +Install it and run: ```bash npm install npm run dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +or -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + + +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts) -This example uses [`next/font/google`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts) to automatically optimize and load Inter, a custom Google Font. +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts) ## Learn more To learn more about this example: -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Customizing Base UI](https://mui.com/base-ui/getting-started/customization/) - strategies for styling and customizing Base UI. diff --git a/examples/base-ui-nextjs-tailwind-ts/package.json b/examples/base-ui-nextjs-tailwind-ts/package.json index 52ba5b9ddd5337..20b315432bc1fc 100644 --- a/examples/base-ui-nextjs-tailwind-ts/package.json +++ b/examples/base-ui-nextjs-tailwind-ts/package.json @@ -1,5 +1,5 @@ { - "name": "base-next-app-router-tailwind-ts", + "name": "base-ui-nextjs-tailwind-ts", "version": "5.0.0", "private": true, "scripts": { @@ -12,9 +12,9 @@ "dependencies": { "@mui/base": "latest", "clsx": "latest", - "next": "13.x", - "react": "18.x", - "react-dom": "18.x" + "next": "latest", + "react": "latest", + "react-dom": "latest" }, "devDependencies": { "@types/node": "latest", @@ -24,6 +24,7 @@ "eslint": "latest", "eslint-config-next": "latest", "postcss": "latest", + "postcss-nesting": "latest", "tailwindcss": "latest", "typescript": "latest" } diff --git a/examples/base-ui-nextjs-tailwind-ts/postcss.config.js b/examples/base-ui-nextjs-tailwind-ts/postcss.config.js index 12a703d900da81..44fd4d67d3c9d1 100644 --- a/examples/base-ui-nextjs-tailwind-ts/postcss.config.js +++ b/examples/base-ui-nextjs-tailwind-ts/postcss.config.js @@ -1,5 +1,6 @@ module.exports = { plugins: { + 'tailwindcss/nesting': 'postcss-nesting', tailwindcss: {}, autoprefixer: {}, }, diff --git a/examples/base-ui-nextjs-tailwind-ts/src/app/layout.tsx b/examples/base-ui-nextjs-tailwind-ts/src/app/layout.tsx index 5315adf5e2dd39..798fd9d1f8bde9 100644 --- a/examples/base-ui-nextjs-tailwind-ts/src/app/layout.tsx +++ b/examples/base-ui-nextjs-tailwind-ts/src/app/layout.tsx @@ -2,7 +2,11 @@ import * as React from 'react'; import { IBM_Plex_Sans } from 'next/font/google'; import './globals.css'; -const font = IBM_Plex_Sans({ weight: ['400', '500', '700'], subsets: ['latin'] }); +const font = IBM_Plex_Sans({ + weight: ['400', '500', '700'], + subsets: ['latin'], + display: 'swap', +}); export const metadata = { title: 'Create Next App', diff --git a/examples/base-ui-vite-tailwind/README.md b/examples/base-ui-vite-tailwind/README.md index 2008ff6ff13a34..bfec1fa73acf56 100644 --- a/examples/base-ui-vite-tailwind/README.md +++ b/examples/base-ui-vite-tailwind/README.md @@ -15,17 +15,17 @@ curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip cd base-ui-vite-tailwind ``` -Install dependencies and run: +Install it and run: ```bash npm install npm start ``` -PS: Don't forget to [optimize](https://tailwindcss.com/docs/optimizing-for-production) Tailwind CSS for production! - or: [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind) + +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind) diff --git a/examples/base-ui-vite-tailwind/package.json b/examples/base-ui-vite-tailwind/package.json index bee98bd3c3b2bb..eae01e51904be7 100644 --- a/examples/base-ui-vite-tailwind/package.json +++ b/examples/base-ui-vite-tailwind/package.json @@ -1,5 +1,5 @@ { - "name": "base-vite-tailwind", + "name": "base-ui-vite-tailwind", "private": true, "version": "5.0.0", "type": "module", diff --git a/examples/joy-ui-cra-ts/README.md b/examples/joy-ui-cra-ts/README.md index a097c4f64ad643..9ba47d544a98c0 100644 --- a/examples/joy-ui-cra-ts/README.md +++ b/examples/joy-ui-cra-ts/README.md @@ -27,3 +27,10 @@ or: [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-ui-cra-ts) [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/joy-ui-cra-ts) + +## What's next? + + + +You now have a working example project. +You can head back to the documentation and continue by browsing the [templates](https://mui.com/joy-ui/getting-started/templates/) section. diff --git a/examples/joy-ui-cra-ts/package.json b/examples/joy-ui-cra-ts/package.json index 32c4c4fa1aa380..f49142ca1fb58c 100644 --- a/examples/joy-ui-cra-ts/package.json +++ b/examples/joy-ui-cra-ts/package.json @@ -1,5 +1,5 @@ { - "name": "joy-cra-ts", + "name": "joy-ui-cra-ts", "version": "5.0.0", "private": true, "dependencies": { diff --git a/examples/joy-ui-nextjs-ts/README.md b/examples/joy-ui-nextjs-ts/README.md index bd6452329ee96e..bdc58b0416c06b 100644 --- a/examples/joy-ui-nextjs-ts/README.md +++ b/examples/joy-ui-nextjs-ts/README.md @@ -2,7 +2,7 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). -## Getting started +## How to use Download the example [or clone the repo](https://github.com/mui/material-ui): @@ -13,7 +13,7 @@ curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip cd joy-ui-nextjs-ts ``` -Install dependencies and run: +Install it and run: ```bash npm install @@ -22,13 +22,24 @@ npm run dev Open [http://localhost:3000](http://localhost:3000) with your web browser to see the result. -You can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file. +or: -This example uses [`next/font/google`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts) to automatically optimize and load Public Sans, a custom Google Font. + + +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-ui-nextjs-ts) + +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/joy-ui-nextjs-ts) ## Learn more To learn more about this example: -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Customizing Joy UI](https://mui.com/joy-ui/customization/approaches/) - approaches to customizing Joy UI. + +## What's next? + + + +You now have a working example project. +You can head back to the documentation and continue by browsing the [templates](https://mui.com/joy-ui/getting-started/templates/) section. diff --git a/examples/joy-ui-nextjs-ts/package.json b/examples/joy-ui-nextjs-ts/package.json index f787f03882be40..621590dbe42d43 100644 --- a/examples/joy-ui-nextjs-ts/package.json +++ b/examples/joy-ui-nextjs-ts/package.json @@ -1,6 +1,6 @@ { - "name": "joy-next-app-router-ts", - "version": "0.1.0", + "name": "joy-ui-nextjs-ts", + "version": "5.0.0", "private": true, "scripts": { "dev": "next dev", @@ -14,9 +14,9 @@ "@emotion/react": "latest", "@emotion/styled": "latest", "@mui/joy": "latest", - "next": "13.x", - "react": "18.x", - "react-dom": "18.x" + "next": "latest", + "react": "latest", + "react-dom": "latest" }, "devDependencies": { "@types/node": "latest", diff --git a/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/theme.js b/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/theme.js deleted file mode 100644 index 18f316a884095e..00000000000000 --- a/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/theme.js +++ /dev/null @@ -1,23 +0,0 @@ -import { Inter } from 'next/font/google'; -import { extendTheme } from '@mui/joy/styles'; - -Inter({ - subsets: ['latin'], - display: 'swap', -}); - -const theme = extendTheme({ - components: { - JoyButton: { - styleOverrides: { - root: ({ ownerState }) => ({ - ...(ownerState.color === 'primary' && { - backgroundColor: '#4338ca', - }), - }), - }, - }, - }, -}); - -export default theme; diff --git a/examples/joy-ui-nextjs/src/components/ThemeRegistry/theme.ts b/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/theme.ts similarity index 96% rename from examples/joy-ui-nextjs/src/components/ThemeRegistry/theme.ts rename to examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/theme.ts index e1715771f83411..0290615dce326f 100644 --- a/examples/joy-ui-nextjs/src/components/ThemeRegistry/theme.ts +++ b/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/theme.ts @@ -5,6 +5,7 @@ const inter = Inter({ subsets: ['latin'], adjustFontFallback: false, // prevent NextJS from adding its own fallback font fallback: ['var(--joy-fontFamily-fallback)'], // use Joy UI's fallback font + display: 'swap', }); const sourceCodePro = Source_Code_Pro({ @@ -21,6 +22,7 @@ const sourceCodePro = Source_Code_Pro({ 'Courier New', 'monospace', ], + display: 'swap', }); const theme = extendTheme({ diff --git a/examples/joy-ui-vite-ts/README.md b/examples/joy-ui-vite-ts/README.md index a4facaa0016758..a46bd11cb85a16 100644 --- a/examples/joy-ui-vite-ts/README.md +++ b/examples/joy-ui-vite-ts/README.md @@ -22,6 +22,8 @@ npm run dev or: + + [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-ui-vite-ts) [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/joy-ui-vite-ts) @@ -30,3 +32,10 @@ or: This example uses [Vite.js](https://github.com/vitejs/vite). It includes `@mui/joy` and it's peer dependencies. + +## What's next? + + + +You now have a working example project. +You can head back to the documentation and continue by browsing the [templates](https://mui.com/joy-ui/getting-started/templates/) section. diff --git a/examples/joy-ui-vite-ts/package.json b/examples/joy-ui-vite-ts/package.json index 02aacea6537f5f..a48b10f9b57a6d 100644 --- a/examples/joy-ui-vite-ts/package.json +++ b/examples/joy-ui-vite-ts/package.json @@ -1,7 +1,7 @@ { "name": "joy-ui-vite-ts", "private": true, - "version": "0.0.0", + "version": "5.0.0", "type": "module", "scripts": { "dev": "vite", diff --git a/examples/material-ui-cra-styled-components-ts/README.md b/examples/material-ui-cra-styled-components-ts/README.md index 7aa41a7215cbe0..98d6ee90f430d2 100644 --- a/examples/material-ui-cra-styled-components-ts/README.md +++ b/examples/material-ui-cra-styled-components-ts/README.md @@ -40,7 +40,7 @@ npm start Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts). -The following link leverages this demo: https://mui.com/guides/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json` +The following link leverages this demo: https://mui.com/guides/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`. [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-interoperability-w9z9d) diff --git a/examples/material-ui-cra-styled-components-ts/package.json b/examples/material-ui-cra-styled-components-ts/package.json index 6023c79aca25dd..f459b0451edc9a 100644 --- a/examples/material-ui-cra-styled-components-ts/package.json +++ b/examples/material-ui-cra-styled-components-ts/package.json @@ -1,5 +1,5 @@ { - "name": "material-cra-styled-components-ts", + "name": "material-ui-cra-styled-components-ts", "version": "5.0.0", "private": true, "dependencies": { diff --git a/examples/material-ui-cra-styled-components-ts/src/ProTip.tsx b/examples/material-ui-cra-styled-components-ts/src/ProTip.tsx index 37c54a31cea8a6..75e89824a97653 100644 --- a/examples/material-ui-cra-styled-components-ts/src/ProTip.tsx +++ b/examples/material-ui-cra-styled-components-ts/src/ProTip.tsx @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-cra-styled-components/README.md b/examples/material-ui-cra-styled-components/README.md index 22552e5a594466..667d4a31bb3651 100644 --- a/examples/material-ui-cra-styled-components/README.md +++ b/examples/material-ui-cra-styled-components/README.md @@ -24,13 +24,13 @@ npm start Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-cra-styled-components). -The following link leverages this demo: https://mui.com/guides/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json` +The following link leverages this demo: https://mui.com/guides/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`. [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-interoperability-w9z9d) ## The idea behind the example -This example demonstrates how you can setup Material UI with [Create React App](https://github.com/facebookincubator/create-react-app), using [styled-components](https://styled-components.com/) as a style engine for your application. +This example demonstrates how to set up Material UI with [Create React App](https://github.com/facebookincubator/create-react-app), using [styled-components](https://styled-components.com/) as a style engine for your application. ## What's next? diff --git a/examples/material-ui-cra-styled-components/package.json b/examples/material-ui-cra-styled-components/package.json index da93c595cafece..2851457439f64a 100644 --- a/examples/material-ui-cra-styled-components/package.json +++ b/examples/material-ui-cra-styled-components/package.json @@ -1,5 +1,5 @@ { - "name": "material-cra-styled-components", + "name": "material-ui-cra-styled-components", "version": "5.0.0", "private": true, "dependencies": { diff --git a/examples/material-ui-cra-styled-components/src/ProTip.js b/examples/material-ui-cra-styled-components/src/ProTip.js index d29f50330df178..726025eff9a680 100644 --- a/examples/material-ui-cra-styled-components/src/ProTip.js +++ b/examples/material-ui-cra-styled-components/src/ProTip.js @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-cra-tailwind-ts/README.md b/examples/material-ui-cra-tailwind-ts/README.md index f8901da11df801..b3fcd127ce6687 100644 --- a/examples/material-ui-cra-tailwind-ts/README.md +++ b/examples/material-ui-cra-tailwind-ts/README.md @@ -22,10 +22,6 @@ or: -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) - - - [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) ## The idea behind the example diff --git a/examples/material-ui-cra-tailwind-ts/package.json b/examples/material-ui-cra-tailwind-ts/package.json index dd415239f16cfa..7e5501badd283f 100644 --- a/examples/material-ui-cra-tailwind-ts/package.json +++ b/examples/material-ui-cra-tailwind-ts/package.json @@ -1,5 +1,5 @@ { - "name": "material-cra-tailwind-ts", + "name": "material-ui-cra-tailwind-ts", "version": "5.0.0", "private": true, "dependencies": { diff --git a/examples/material-ui-cra-tailwind-ts/src/ProTip.tsx b/examples/material-ui-cra-tailwind-ts/src/ProTip.tsx index 37c54a31cea8a6..75e89824a97653 100644 --- a/examples/material-ui-cra-tailwind-ts/src/ProTip.tsx +++ b/examples/material-ui-cra-tailwind-ts/src/ProTip.tsx @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-cra-ts/README.md b/examples/material-ui-cra-ts/README.md index 7c2fd589bc403e..f9e09dd63ef914 100644 --- a/examples/material-ui-cra-ts/README.md +++ b/examples/material-ui-cra-ts/README.md @@ -24,8 +24,6 @@ or: [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-cra-ts) - - [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-cra-ts) ## The idea behind the example diff --git a/examples/material-ui-cra-ts/package.json b/examples/material-ui-cra-ts/package.json index 71d6809a0d7035..943a2266ee3186 100644 --- a/examples/material-ui-cra-ts/package.json +++ b/examples/material-ui-cra-ts/package.json @@ -1,5 +1,5 @@ { - "name": "material-cra-ts", + "name": "material-ui-cra-ts", "version": "5.0.0", "private": true, "dependencies": { diff --git a/examples/material-ui-cra-ts/src/ProTip.tsx b/examples/material-ui-cra-ts/src/ProTip.tsx index 37c54a31cea8a6..75e89824a97653 100644 --- a/examples/material-ui-cra-ts/src/ProTip.tsx +++ b/examples/material-ui-cra-ts/src/ProTip.tsx @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-cra/README.md b/examples/material-ui-cra/README.md index 87e0a14bf31155..e10d3a8b3a0dc1 100644 --- a/examples/material-ui-cra/README.md +++ b/examples/material-ui-cra/README.md @@ -24,8 +24,6 @@ or: [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-cra) - - [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-cra) ## The idea behind the example diff --git a/examples/material-ui-cra/package.json b/examples/material-ui-cra/package.json index 6c9e3497a3da79..b7490d21c0d880 100644 --- a/examples/material-ui-cra/package.json +++ b/examples/material-ui-cra/package.json @@ -1,5 +1,5 @@ { - "name": "material-cra", + "name": "material-ui-cra", "version": "5.0.0", "private": true, "scripts": { diff --git a/examples/material-ui-cra/src/ProTip.js b/examples/material-ui-cra/src/ProTip.js index d29f50330df178..726025eff9a680 100644 --- a/examples/material-ui-cra/src/ProTip.js +++ b/examples/material-ui-cra/src/ProTip.js @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-express-ssr/ProTip.js b/examples/material-ui-express-ssr/ProTip.js index d29f50330df178..726025eff9a680 100644 --- a/examples/material-ui-express-ssr/ProTip.js +++ b/examples/material-ui-express-ssr/ProTip.js @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-express-ssr/README.md b/examples/material-ui-express-ssr/README.md index 4c7bbcf8ff1d8b..7dcdcb85998dc6 100644 --- a/examples/material-ui-express-ssr/README.md +++ b/examples/material-ui-express-ssr/README.md @@ -18,6 +18,14 @@ npm install npm run start ``` +or: + + + +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-express-ssr) + +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-express-ssr) + ## The idea behind the example This is the reference implementation of the [Server Rendering tutorial](https://mui.com/material-ui/guides/server-rendering/). diff --git a/examples/material-ui-express-ssr/package.json b/examples/material-ui-express-ssr/package.json index b3c736f83cdc89..5abdc1aad2d831 100644 --- a/examples/material-ui-express-ssr/package.json +++ b/examples/material-ui-express-ssr/package.json @@ -1,5 +1,5 @@ { - "name": "material-express-ssr", + "name": "material-ui-express-ssr", "version": "5.0.0", "private": true, "browserslist": [ diff --git a/examples/material-ui-gatsby/package.json b/examples/material-ui-gatsby/package.json index 86c01140bf8ab5..54dee2718a5aff 100644 --- a/examples/material-ui-gatsby/package.json +++ b/examples/material-ui-gatsby/package.json @@ -1,5 +1,5 @@ { - "name": "material-gatsby", + "name": "material-ui-gatsby", "version": "5.0.0", "private": true, "browserslist": [ diff --git a/examples/material-ui-gatsby/src/components/ProTip.js b/examples/material-ui-gatsby/src/components/ProTip.js index d29f50330df178..726025eff9a680 100644 --- a/examples/material-ui-gatsby/src/components/ProTip.js +++ b/examples/material-ui-gatsby/src/components/ProTip.js @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-nextjs-pages-router-ts/README.md b/examples/material-ui-nextjs-pages-router-ts/README.md index 729c2705bb6055..1171328c19a9ef 100644 --- a/examples/material-ui-nextjs-pages-router-ts/README.md +++ b/examples/material-ui-nextjs-pages-router-ts/README.md @@ -37,8 +37,8 @@ It includes `@mui/material` and its peer dependencies, including [Emotion](https ## The link component -The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with MUI. -More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js). +The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI. +More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js-pages-router). ## What's next? diff --git a/examples/material-ui-nextjs-pages-router-ts/package.json b/examples/material-ui-nextjs-pages-router-ts/package.json index 347f22c596f4d3..827f6381a31a27 100644 --- a/examples/material-ui-nextjs-pages-router-ts/package.json +++ b/examples/material-ui-nextjs-pages-router-ts/package.json @@ -1,5 +1,5 @@ { - "name": "material-next-ts", + "name": "material-ui-nextjs-pages-router-ts", "version": "5.0.0", "private": true, "scripts": { diff --git a/examples/material-ui-nextjs-pages-router-ts/src/ProTip.tsx b/examples/material-ui-nextjs-pages-router-ts/src/ProTip.tsx index 37c54a31cea8a6..75e89824a97653 100644 --- a/examples/material-ui-nextjs-pages-router-ts/src/ProTip.tsx +++ b/examples/material-ui-nextjs-pages-router-ts/src/ProTip.tsx @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-nextjs-pages-router/README.md b/examples/material-ui-nextjs-pages-router/README.md index bd68ac872ba28f..b1ed6ab52e4f10 100644 --- a/examples/material-ui-nextjs-pages-router/README.md +++ b/examples/material-ui-nextjs-pages-router/README.md @@ -38,8 +38,8 @@ If you prefer, you can [use styled-components instead](https://mui.com/material- ## The Link component -The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with MUI. -More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js). +The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI. +More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js-pages-router). ## What's next? diff --git a/examples/material-ui-nextjs-pages-router/package.json b/examples/material-ui-nextjs-pages-router/package.json index 025032f06627fc..2431cd2a716bdc 100644 --- a/examples/material-ui-nextjs-pages-router/package.json +++ b/examples/material-ui-nextjs-pages-router/package.json @@ -1,5 +1,5 @@ { - "name": "material-next", + "name": "material-ui-nextjs-pages-router", "version": "5.0.0", "private": true, "scripts": { diff --git a/examples/material-ui-nextjs-pages-router/src/ProTip.js b/examples/material-ui-nextjs-pages-router/src/ProTip.js index d29f50330df178..726025eff9a680 100644 --- a/examples/material-ui-nextjs-pages-router/src/ProTip.js +++ b/examples/material-ui-nextjs-pages-router/src/ProTip.js @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/README.md b/examples/material-ui-nextjs-ts-v4-v5-migration/README.md index ea442097116e35..48b2a10202b51e 100644 --- a/examples/material-ui-nextjs-ts-v4-v5-migration/README.md +++ b/examples/material-ui-nextjs-ts-v4-v5-migration/README.md @@ -22,9 +22,9 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration) ## The idea behind the example @@ -37,6 +37,6 @@ It demonstrates what results after handling v5's breaking changes to the [theme] ## The Link component -Next.js has [a custom Link component](https://nextjs.org/docs/pages/api-reference/components/link). +Next.js Pages Router has [a custom Link component](https://nextjs.org/docs/pages/api-reference/components/link). The example folder provides adapters for usage with Material UI. -You can find more information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js). +You can find more information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js-pages-router). diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/package.json b/examples/material-ui-nextjs-ts-v4-v5-migration/package.json index 352c353116aa8d..eb9a60dee6f688 100644 --- a/examples/material-ui-nextjs-ts-v4-v5-migration/package.json +++ b/examples/material-ui-nextjs-ts-v4-v5-migration/package.json @@ -1,5 +1,5 @@ { - "name": "material-next-ts-v4-v5-migration", + "name": "material-ui-nextjs-ts-v4-v5-migration", "version": "5.0.0", "private": true, "scripts": { @@ -19,14 +19,14 @@ "@mui/styles": "latest", "autoprefixer": "latest", "clean-css": "latest", - "next": "^12.0.0", + "next": "latest", "postcss": "latest", - "react": "^17.0.0", - "react-dom": "^17.0.0" + "react": "latest", + "react-dom": "latest" }, "devDependencies": { "@types/node": "latest", - "@types/react": "^17.0.0", + "@types/react": "latest", "eslint": "latest", "eslint-config-next": "latest", "typescript": "latest" diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/src/ProTip.tsx b/examples/material-ui-nextjs-ts-v4-v5-migration/src/ProTip.tsx index 20aa9cf02dca37..7e2f3e7cc9f583 100644 --- a/examples/material-ui-nextjs-ts-v4-v5-migration/src/ProTip.tsx +++ b/examples/material-ui-nextjs-ts-v4-v5-migration/src/ProTip.tsx @@ -25,9 +25,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} + {'Pro tip: See more '} templates in the - MUI documentation. + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-nextjs-ts/README.md b/examples/material-ui-nextjs-ts/README.md index 7a66c7267bc543..a0f9e85dc8e076 100644 --- a/examples/material-ui-nextjs-ts/README.md +++ b/examples/material-ui-nextjs-ts/README.md @@ -13,7 +13,7 @@ curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip cd material-ui-nextjs-ts ``` -Install dependencies and run: +Install it and run: ```bash npm install @@ -22,13 +22,24 @@ npm run dev Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -You can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file. +or: -This example uses [`next/font/google`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts) to automatically optimize and load Roboto, a custom Google Font. + + +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) + +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) ## Learn more To learn more about this example: -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Customizing Material UI](https://mui.com/material-ui/customization/how-to-customize/) - approaches to customizing Material UI. + +## What's next? + + + +You now have a working example project. +You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-nextjs-ts/package.json b/examples/material-ui-nextjs-ts/package.json index f6cd3f9696c4d1..a0b6b356c4bc4b 100644 --- a/examples/material-ui-nextjs-ts/package.json +++ b/examples/material-ui-nextjs-ts/package.json @@ -1,5 +1,5 @@ { - "name": "material-next-app-router-ts", + "name": "material-ui-nextjs-ts", "version": "5.0.0", "private": true, "scripts": { @@ -15,9 +15,9 @@ "@emotion/styled": "latest", "@mui/icons-material": "latest", "@mui/material": "latest", - "next": "13.x", - "react": "18.x", - "react-dom": "18.x" + "next": "latest", + "react": "latest", + "react-dom": "latest" }, "devDependencies": { "@types/node": "latest", diff --git a/examples/material-ui-nextjs/README.md b/examples/material-ui-nextjs/README.md index cf9b65c5e8940f..f2684b1883538d 100644 --- a/examples/material-ui-nextjs/README.md +++ b/examples/material-ui-nextjs/README.md @@ -13,7 +13,7 @@ curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip cd material-ui-nextjs ``` -Install dependencies and run: +Install it and run: ```bash npm install @@ -22,13 +22,24 @@ npm run dev Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -You can start editing the page by modifying `src/app/page.js`. The page auto-updates as you edit the file. +or: -This example uses [`next/font/google`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts) to automatically optimize and load Roboto, a custom Google Font. + + +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs) + +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-nextjs) ## Learn more To learn more about this example: -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Customizing Material UI](https://mui.com/material-ui/customization/how-to-customize/) - approaches to customizing Material UI. + +## What's next? + + + +You now have a working example project. +You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-nextjs/package.json b/examples/material-ui-nextjs/package.json index 69eaf7e0ef17a4..1f856819542ca7 100644 --- a/examples/material-ui-nextjs/package.json +++ b/examples/material-ui-nextjs/package.json @@ -16,8 +16,8 @@ "@mui/material": "latest", "eslint": "latest", "eslint-config-next": "latest", - "next": "13.x", - "react": "18.x", - "react-dom": "18.x" + "next": "latest", + "react": "latest", + "react-dom": "latest" } } diff --git a/examples/material-ui-preact/README.md b/examples/material-ui-preact/README.md index 946c874416ac30..fbd43cfbc958e8 100644 --- a/examples/material-ui-preact/README.md +++ b/examples/material-ui-preact/README.md @@ -18,15 +18,11 @@ npm install npm run start ``` -or - -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-preact) - ## The idea behind the example -The project uses Material UI with [Preact](https://github.com/developit/preact), which is a lightweight (3 kb) alternative to React with the same modern API. +The project uses Material UI with [Preact](https://github.com/developit/preact), which is a lightweight (3 kB) alternative to React with the same modern API. -This example uses CRA with `react-app-rewired` for adding webpack aliases for preact. +This example uses CRA with `react-app-rewired` for adding Webpack aliases for Preact. It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. diff --git a/examples/material-ui-preact/package.json b/examples/material-ui-preact/package.json index 8d7acbff286d3c..47394d072c47b6 100644 --- a/examples/material-ui-preact/package.json +++ b/examples/material-ui-preact/package.json @@ -1,5 +1,5 @@ { - "name": "material-preact", + "name": "material-ui-preact", "version": "5.0.0", "private": true, "dependencies": { diff --git a/examples/material-ui-preact/src/ProTip.js b/examples/material-ui-preact/src/ProTip.js index d29f50330df178..726025eff9a680 100644 --- a/examples/material-ui-preact/src/ProTip.js +++ b/examples/material-ui-preact/src/ProTip.js @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-remix-ts/app/routes/index.tsx b/examples/material-ui-remix-ts/app/routes/index.tsx index c8f8c454142010..17a56b6e2b5c5d 100644 --- a/examples/material-ui-remix-ts/app/routes/index.tsx +++ b/examples/material-ui-remix-ts/app/routes/index.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import type { MetaFunction } from '@remix-run/node'; -import { Link } from '@remix-run/react'; +import { Link as RemixLink } from '@remix-run/react'; import Typography from '@mui/material/Typography'; +import Link from '@mui/material/Link'; // https://remix.run/api/conventions#meta export const meta: MetaFunction = () => { @@ -18,7 +19,7 @@ export default function Index() { Material UI Remix in TypeScript example - + Go to the about page diff --git a/examples/material-ui-remix-ts/app/src/ProTip.tsx b/examples/material-ui-remix-ts/app/src/ProTip.tsx index 37c54a31cea8a6..75e89824a97653 100644 --- a/examples/material-ui-remix-ts/app/src/ProTip.tsx +++ b/examples/material-ui-remix-ts/app/src/ProTip.tsx @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-remix-ts/package.json b/examples/material-ui-remix-ts/package.json index e46f018c04d258..c5b00d4e28cef5 100644 --- a/examples/material-ui-remix-ts/package.json +++ b/examples/material-ui-remix-ts/package.json @@ -1,5 +1,5 @@ { - "name": "material-remix-ts", + "name": "material-ui-remix-ts", "version": "5.0.0", "private": true, "scripts": { diff --git a/examples/material-ui-via-cdn/README.md b/examples/material-ui-via-cdn/README.md index d3899c2809da1b..2e8ca40c86df03 100644 --- a/examples/material-ui-via-cdn/README.md +++ b/examples/material-ui-via-cdn/README.md @@ -23,7 +23,7 @@ The client has to download the entire library, regardless of which components ar -[The live preview.](https://combinatronics.com/mui/material-ui/master/examples/material-ui-via-cdn/index.html) +[The live preview.](https://rawcdn.githack.com/mui/material-ui/master/examples/material-ui-via-cdn/index.html) ## UMD releases diff --git a/examples/material-ui-via-cdn/index.html b/examples/material-ui-via-cdn/index.html index 41e32af59d7537..edb8dbd4103412 100644 --- a/examples/material-ui-via-cdn/index.html +++ b/examples/material-ui-via-cdn/index.html @@ -68,10 +68,10 @@ function ProTip() { return ( - - Pro tip: See more{' '} - templates in - the MUI documentation. + + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-via-cdn/package.json b/examples/material-ui-via-cdn/package.json index 02a6cf3031888b..3dc560540732a7 100644 --- a/examples/material-ui-via-cdn/package.json +++ b/examples/material-ui-via-cdn/package.json @@ -1,5 +1,5 @@ { - "name": "material-via-cdn", + "name": "material-ui-via-cdn", "version": "5.0.0", "private": true, "dependencies": {}, diff --git a/examples/material-ui-vite-ts/package.json b/examples/material-ui-vite-ts/package.json index 2cb8e68f1abde9..f8b6eefe8053d1 100644 --- a/examples/material-ui-vite-ts/package.json +++ b/examples/material-ui-vite-ts/package.json @@ -1,5 +1,5 @@ { - "name": "material-vite-ts", + "name": "material-ui-vite-ts", "private": true, "version": "5.0.0", "type": "module", diff --git a/examples/material-ui-vite-ts/src/ProTip.tsx b/examples/material-ui-vite-ts/src/ProTip.tsx index 37c54a31cea8a6..75e89824a97653 100644 --- a/examples/material-ui-vite-ts/src/ProTip.tsx +++ b/examples/material-ui-vite-ts/src/ProTip.tsx @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); } diff --git a/examples/material-ui-vite/package.json b/examples/material-ui-vite/package.json index d9fc42dbf0bc59..71c02e87add914 100644 --- a/examples/material-ui-vite/package.json +++ b/examples/material-ui-vite/package.json @@ -1,5 +1,5 @@ { - "name": "material-vite", + "name": "material-ui-vite", "version": "5.0.0", "private": true, "scripts": { diff --git a/examples/material-ui-vite/src/ProTip.jsx b/examples/material-ui-vite/src/ProTip.jsx index d29f50330df178..726025eff9a680 100644 --- a/examples/material-ui-vite/src/ProTip.jsx +++ b/examples/material-ui-vite/src/ProTip.jsx @@ -15,9 +15,9 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates in the - MUI documentation. + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} ); }