[Feature]: adding configuration styles with material-ui/core and style using JSS

[rahXephonz]

What is the new or updated feature that you are suggesting?

Is there anything customization or configuration between @material-ui/core with @material-ui/style using JSS with Remix?

Why should this feature be included?

Warning: Prop className did not match. Server: "makeStyles-heading-5" Client: "makeStyles-heading-1"

I got that warning but i think the configuration between styled-components and material-ui/core its not same.

but both use css in js method.

is there any other suggestions or reference?

[rahXephonz]

my package.json configuration

{
  "private": true,
  "name": "remix-app-template",
  "description": "",
  "license": "",
  "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "postinstall": "remix setup node"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@remix-run/react": "^1.1.3",
    "@remix-run/serve": "^1.1.3",
    "@remix-run/vercel": "^1.1.3",
    "dotenv": "^14.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "remix": "^1.1.3"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.1.3",
    "@types/react": "^17.0.24",
    "@types/react-dom": "^17.0.9",
    "typescript": "^4.1.2"
  },
  "engines": {
    "node": ">=14"
  },
  "sideEffects": false
}

[rahXephonz]

my index.tsx route

import { makeStyles } from "@material-ui/core";
import { createStyles } from "@material-ui/styles";

const styles = createStyles({
  heading: {
    fontSize: "1.5rem",
    background: "green",
  },
});

const useStyles = makeStyles(styles);

export default function Index() {
  const classes = useStyles();

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1 className={classes.heading}>Welcome to Remix</h1>
      <ul>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/blog"
            rel="noreferrer"
          >
            15m Quickstart Blog Tutorial
          </a>
        </li>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/jokes"
            rel="noreferrer"
          >
            Deep Dive Jokes App Tutorial
          </a>
        </li>
        <li>
          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
            Remix Docs
          </a>
        </li>
      </ul>
    </div>
  );
}

[kalliub]

Any updates on this?

[rahXephonz]

See this example https://github.com/duvet86/remix-mui

this question has been mark as answered so, if u guys find a error ssr hydrating error with MUI pls check that example repo