Closed rahXephonz closed 2 years ago
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
}
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>
);
}
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?