005cf56baf
Material UI and Next.js example with @mui/styles (in TypeScript)
How to use
Download the example or clone the repo:
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:
npm install
npm run dev
or:
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.
The Link component
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.