Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmijatovic/next12-react18-mui5-dnd
Testing next 12 with react 18, mui-5 for adding css variables dynamically
https://github.com/dmijatovic/next12-react18-mui5-dnd
Last synced: 10 days ago
JSON representation
Testing next 12 with react 18, mui-5 for adding css variables dynamically
- Host: GitHub
- URL: https://github.com/dmijatovic/next12-react18-mui5-dnd
- Owner: dmijatovic
- Created: 2022-07-23T17:37:15.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-09-01T18:43:07.000Z (over 2 years ago)
- Last Synced: 2024-11-13T16:54:11.236Z (2 months ago)
- Language: TypeScript
- Size: 165 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js with TypeScript example
This is example uses the latest version. At the time of testing latest version were:
- Next v12.2.3
- React 18.2.0
- MUI 5.9.2
- emotion/react 11.9.3
This is test for using css variables for theming with mui.
For swithing between themes we would like to use css variables based on data meta prop on the body.
## How to use
Download the example [or clone the repo](https://github.com/mui/material-ui):
```sh
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/nextjs-with-typescript
cd nextjs-with-typescript
```
Install it and run:
```sh
npm install
npm run dev
```
or:
[](https://stackblitz.com/github/mui/material-ui/tree/master/examples/nextjs-with-typescript)
[](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/nextjs-with-typescript)
## The idea behind the example
The project uses [Next.js](https://github.com/vercel/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 MUI v5. If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
## The link component
Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link).
The example folder provides adapters for usage with MUI.
More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js).
## What's next?
You now have a working example project.
You can head back to the documentation, continuing browsing it from the [templates](https://mui.com/material-ui/getting-started/templates/) section.