makeStyles 的 Material-UI 问题

Question

I have faced the following issue:

 ...
 var useStyles = makeStyles(function (theme) {
  11 |     var _a;
> 12 |     return createStyles({
  13 |         button: {
 ...

package.json with material-ui deps:

...
"@material-ui/core": "4.9.7",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.45",
"@material-ui/pickers": "3.2.8",
"jss": "^10.0.2",
"material-ui": "^0.20.2",
"mdi-material-ui": "^6.2.0",
...

I have no idea what went wrong. Other related answers on StackOverflow didn't helped me. So, I hope you could help me with that issue! Thanks

Answer 1

There is no need to use createStyles with makeStyles inside a functional component.

• Classical: withStyles (High order function) + createStyles
• Functional: useStyles (hooks) + makeStyles

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

const useStyles = makeStyles(theme => ({
  button: {
  }
}));

const classes = useStyles();

---

Refer:

• Material-UI: styles document

• Related QA: https://stackoverflow.com/a/60736142/11872246