Material UI样式使用报错：TypeScript中调用useStyles提示'This expression is not callable. Type "never" has no call signatures'的解决咨询

I've run into this exact issue before when working with Material UI and TypeScript—let's break down what's causing it and how to fix it.

The error const useStyles: never happens because TypeScript can't properly infer the type of the makeStyles hook, usually due to mismatched configuration or version compatibility issues. Here are the most reliable fixes to try:

1. Update Your JSX Configuration in tsconfig.json #

Your current jsx setting is "react", which uses the old React JSX transform. For React 17+ (which you're likely using given your target is ES2017), switching to the new transform helps TypeScript work better with Material UI's style hooks.

Modify your tsconfig.json:

"compilerOptions": {
  // ... other settings
  "jsx": "react-jsx"
}

This is the most common fix for this specific error.

2. Explicitly Add Generic Types to makeStyles #

If adjusting the JSX config doesn't resolve it, you can help TypeScript out by specifying the generic type for makeStyles.

For basic styles without theme dependencies:

const useStyles = makeStyles<{}>({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

If you're using Material UI's theme in your styles, explicitly type the theme parameter:

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

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    background: theme.palette.secondary.main,
    // ... your other styles
  },
}));

3. Verify Version Compatibility #

Double-check that your Material UI and TypeScript versions play well together:

• If you're using Material UI v4, ensure you're on TypeScript 3.2 or higher (v4 is fully compatible with TS 3.2+).
• If you've upgraded to Material UI v5, note that makeStyles was moved to the @mui/styles package. You'll need to install it separately:

  npm install @mui/styles
  

  Then update your import to:

  import { makeStyles } from '@mui/styles';
  

4. Temporary: Adjust Strict Mode Settings (Not Recommended Long-Term) #

If none of the above work, you can try disabling strictFunctionTypes in your tsconfig.json as a temporary test. This loosens TypeScript's function type checking, which might bypass the error:

"compilerOptions": {
  "strict": true,
  "strictFunctionTypes": false,
  // ... other settings
}

I don't recommend keeping this disabled permanently, but it can help confirm if strict type checking is the root cause.

Start with the first fix (updating the JSX setting)—that's resolved this issue for me and most developers I've worked with.

内容的提问来源于stack exchange，提问作者Peter Boomsma