/remix-with-typescript-ssr-err

Primary LanguageTypeScript

Remix example

To Reproduce Rendering Error:

  1. Start App in a docker container:

    docker build -t remix-with-typescript-ssr-err .
docker run -it -p 3000 remix-with-typescript-ssr-err

  2. Open in browser: http://localhost:3000/

  3. You should see an error like this in the dev console:

    react-dom.development.js:86 Warning: Prop className did not match. Server: "MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-gtvj52" Client: "MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-1vw6mcs-MuiTypography-root"

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/remix-with-typescript
cd remix-with-typescript

Install it and run:

npm install
npm run dev

or:

Edit on StackBlitz

Edit on CodeSandbox

The idea behind the example

The project uses Remix, which is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. 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.

What's next?

You now have a working example project. You can head back to the documentation, continuing browsing it from the templates section.