Material-UI Error: Object is not a function within makeStyles?

Question

The error:

TypeError: Object(...) is not a function
  13 | import { connect } from 'react-redux';
  14 | 
  15 | 
> 16 | const useStyles = makeStyles(theme => ({
  17 |     ...theme
  18 | }));
  19 |

Code:

const useStyles = makeStyles(theme => ({
    ...theme
}));

Why do I get the above error?
Everything was working but suddenly i got that error, may be after i updated npm npm -g update but i am not sure.

Can someone help out?

Edit: this is how i am using useStyles:

const classes = useStyles();

then i am using the classes to style my elements like this:

<Button className={classes.button} />

classes.button get the button rule from the global theme and use it to style the button

Are you able to add more snippets for us to see what's happening in the code? Especially how useStyles is being utilized... — MwamiTovi
– MwamiTovi, Commented Aug 4, 2020 at 2:25
Ok, that's fine. And where are you using the classes variable after declaring it? e.g. classes.input; Are you able to include that too? — MwamiTovi
– MwamiTovi, Commented Aug 4, 2020 at 2:42
Am trying to follow what you want to achieve, does this means that somewhere you have this const theme = createMuiTheme({...}). Where you defined a theme, right? — MwamiTovi
– MwamiTovi, Commented Aug 4, 2020 at 2:58
I was about to ask you this, import { makeStyles } from '@material-ui/core/styles'; (Re-export with a default theme) vs import { makeStyles } from '@material-ui/styles'; (Original module with no default theme). Was that the issue? Because one of those comes with your theme while the other doesn't... — MwamiTovi
– MwamiTovi, Commented Aug 4, 2020 at 3:10
yes, i imported it wrongly like this import { makeStyles} from '@material-ui/core/styles/makeStyles — Code Eagle
– Code Eagle, Commented Aug 4, 2020 at 3:12

MwamiTovi · Accepted Answer · 2020-08-04 03:23:57Z

2

To remove the need to systematically supply a theme,
the default Material-UI theme is applied to the re-exported makeStyles modules.

// Re-export with a default theme
import { makeStyles } from '@material-ui/core/styles';

// Original module with no default theme
import { makeStyles } from '@material-ui/styles';

But also be careful of "mistaken" imports.

// for example, this is wrong
import { makeStyles } from '@material-ui/core/styles/makeStyles';

Like what @Code Eagle, here, had fallen into. It can be a pain to debug such errors:)
Here's a good read about this from the Material-UI basics.

edited Aug 4, 2020 at 3:23

answered Aug 4, 2020 at 3:18

MwamiTovi

2,52219 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Code Eagle Over a year ago

I think this type of nasty errors is really hard to debug, but when i find this error the next time i would go to see if i am imported right :)

MwamiTovi Over a year ago

The challenge like you had here is that, if it was working the first time, then the last place you suspect is a wrong import statement.:-(

Edmund's Echo · Accepted Answer · 2021-03-13 13:22:36Z

1

When I updated my imports to use the re-exported ref to makeStyles in the core module, I mistakenly failed to delete makeStyles at the end of the import statement when I made the change.

Thank you for the post, I wanted to make the solution a little more explicit for those that update their imports to core.

Bad

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

Good

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

answered Mar 13, 2021 at 13:22

Edmund's Echo

91612 silver badges19 bronze badges

Collectives™ on Stack Overflow

Material-UI Error: Object is not a function within makeStyles?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related