Integrate MUI to Remix 2.8 + Vite basic template

[mahmoudmoravej]

What?

It is a clean integration of Remix 2.0 + Vite and MUI 5.14. It helps you to quickly integrate and use MUI inside your own Remix projects.

Why?

The current original materila-ui-remix example is outdated and really hard to integrate with Remix changes. It has done alot for emotion integration but it is not clear if we still need them or not (seems not). We need an alternative to help devs quickly integrate MUI to their own app.

How?

it is based on basic Remix template, i.e. npx create-remix@latest which is based on Vite. Keeping the baic template should help you quickly find changes and move them to your own project. The "Files Changed" section in this PR shows the required changes you need to do to bring MUI to your own project.

Notes:

• It is heavily borrowed from original materila-ui-remix example. Note that:
  • That mui original example is a bit old and complicated.
  • Emotion has changed alot and it seems there is no need to do lots of the changes(i.e. cache + theme management) that had been done previously as it is there out of the box for NextJs and probably for Remix (https://emotion.sh/docs/ssr#nextjs)
• To make Vite + Esbuild happy, we used alternative package importings to pass SSR and Build time. For example:
  • import {Favorite as FavoriteIcon} from @mui/icons-material instead of import FavoriteIcon from "@mui/icons-material/Favorite";
  • import { colors } from "@mui/material" instead of import { red } from '@mui/material/colors';`
• It keeps the most changes to mui folder and kept the main remix file changes minmal. so, we are able to adopt to new changes quickly.
• mui.tsx is an example to test.
• It has been tested for both Client Side Rendering + SSR in both development and build time (i.e. npm run dev and npm run build+ npm run start

Next?

We still need a thourough review for original contibuters to make sure this approach doesn't change anything wrongly. If everything is fine, we should be ok to alter the original MUI example with this approach.