ContextQMD
Back to Material Ui

Material UI and Next.js example with @mui/styles (in TypeScript)

examples/material-ui-nextjs-ts-v4-v5-migration/README.md

9.0.02.2 KB
Original Source

Material UI and Next.js example with @mui/styles (in TypeScript)

How to use

Download the example or clone the repo:

<!-- #target-branch-reference -->
bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-nextjs-ts-v4-v5-migration
cd material-ui-nextjs-ts-v4-v5-migration

Install it and run:

bash
npm install
npm run dev

or:

<!-- #target-branch-reference -->

The idea behind the example

The project uses Next.js, which is a framework for server-rendered React apps. It includes @mui/material and its peer dependencies, including Emotion, the default style engine in Material UI. If you prefer, you can use styled-components instead.

It also includes @mui/styles, the legacy styling solution that uses JSS as an engine. It provides all the necessary config for working with both Emotion and JSS for server-side rendering. The project is intended as a basic starter for migrating your application from v4 to v5, as it lets the JSS style overrides take precedence over the default styles passed to the components by Emotion. It demonstrates what results after handling v5's breaking changes to the theme and components.

Next.js Pages Router has a custom Link component. The example folder provides adapters for usage with Material UI. You can find more information in the documentation.