0

Hei. I am using MUI within a React project. I have just upgraded to v5 and I got a couple of issues with my stylings:

  1. TypeError: theme.spacing is not a function
  2. TypeError: Cannot read properties of undefined (reading 'primary')

I am using typescript and importing things like so:

import { Theme } from "@mui/material"
import { makeStyles } from "@mui/styles"

And then I am trying to create my classes as I did in v4:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    avatar: {
      width: theme.spacing(3),
      height: theme.spacing(3),
      backgroundColor: theme.palette.primary.light,
    }
  })
);

And then I am using it in my component:

const classes = useStyles();

However the first error is thrown. If I delete the lines with the spacing I am getting the second error, so there might be something that I am missing here as nothing seems to work.

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
Angelo
  • 195
  • 1
  • 15
  • "reading 'primary'" where exactly are you doing that? If this is Typescript why are you not getting red squiggles in your editor/IDE? What is autocomplete suggesting? etc etc – Jared Smith Nov 03 '21 at 23:06
  • It's typescript yes. Sorry, I edited my question with the line "palette.primary". I copied that from another file. – Angelo Nov 03 '21 at 23:10
  • Again, are you getting a *compile-time* Typescript error or a *runtime* Javascript error? And if it's the latter *why* is the code compiling? – Jared Smith Nov 03 '21 at 23:15
  • It's runtime. If I would know, I wouldn't have asked here probably – Angelo Nov 04 '21 at 07:25
  • Fair, so let me rephrase: the compiler should be catching that. Since it isn't, that means that likely somewhere you have done something that defeated it's ability to do so, so check your tsconfig and make sure you have strict null checks, no implicit any, etc. Also check your code for casts or @ts-ignores – Jared Smith Nov 04 '21 at 10:08
  • 1
    Thank you. Found the answer here: https://stackoverflow.com/questions/69678265/how-to-use-mui-v5-makestyles-without-themeprovider – Angelo Nov 05 '21 at 14:57

0 Answers0