Material-ui: "TS2554: Expected 1 arguments, but got 0." on hook returned by makeStyles

Created on 28 Dec 2018  ·  22Comments  ·  Source: mui-org/material-ui

  • [x] This is not a v0.x issue.
  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

TypeScript shouldn't show an error when doing:

Outside the component:
const useStyles = makeStyles(styles);

Inside the component:
const {/* stuff */} = useStyles();

Current Behavior 😯

The useStyles(); function call is underlined, and WebStorm says "TS2554: Expected 1 arguments, but got 0." on it.

| Tech | Version |
|--------------|---------|
| @material-ui/styles | 3.0.0-alpha.4 |
| React | 16.7.0-alpha.2 |
| TypeScript | 3.1.1 |

bug 🐛 styles typescript

Most helpful comment

@krazyjakee try const c = useStyles({});

All 22 comments

Please include your styles declaration and tsconfig.json. Does the error appear when running tsc? Asking this because IDE integrations tend to use a different typescript version.

Unrelated nitpick: Prefer resolved version strings react@next changes over time. You probably meant [email protected]?

I'm not running tsc myself, I'm using the IDE to transpile .ts/x to .js/x directly (in place) whenever I change a TypeScript file.

The version bundled with the WebStorm I'm using is 3.1.1.

Updated the OP to reflect the React version I use: 16.7.0-alpha.2

styles variable is:

const styles = {
    chart: {
        width: '100%',
        height: 70,
        backgroundColor: '#f9f9f9'
    },
}

(I get the same message when styles is defined as a function (theme => { /* definitions */ }).

tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": false,
    "target": "ES2017",
    "module": "ES6",
    "jsx": "react",
    "moduleResolution": "Node",
    "strictPropertyInitialization": true,
    "strictNullChecks": true,
    "noImplicitAny": true
  }
}

(I get the same message when styles is defined as a function (theme => { /* definitions */ }).

Then your setup has an issue too. We test for callback usage and that is working fine. It does however has a reproducible bug when using a static styles object.

The issue is back with combination of [email protected] (complier config incremental: true) and @material-ui/[email protected]. It does work however with [email protected]

@TeoTN Thanks for the report. I think I know why this happens.

@TeoTN Could you include the code that is causing trouble. I can't reproduce it.

@eps1lon here's a repo that reproduces the bug: TeoTN/mui-ts-bug

I also came across the error of this ticket with [email protected] and @material-ui/[email protected].
My reason for upgrading from [email protected] was that VS Code was incredible slow with auto completion and tooltips.

When downgrading to [email protected] there were new errors around makeStyles like

      Types of property 'main' are incompatible.
        Type '{ position: string; top: number; left: number; bottom: number; right: number; }' is not assignable to type 'CSSProperties | ((props: {}) => CSSProperties)'.
          Type '{ position: string; top: number; left: number; bottom: number; right: number; }' is not assignable to type 'CSSProperties'.
            Types of property 'position' are incompatible.
              Type 'string' is not assignable to type 'PositionProperty'.  TS2345

     9 | }));
    10 | 
  > 11 | const useStyles = makeStyles((theme: Theme) => ({
       |                              ^
    12 |   main: {
    13 |     position: 'absolute',
    14 |     top: 0,

I was able to fix this in combination with createStyles like:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    main: {
      position: 'absolute',
      top: 0,

Perhaps worth mentioning is that only the import { createStyles } from '@material-ui/styles'; works while createStyles from @material-ui/core does not since the typings are different.

Using createStyles wasn't necessary with both [email protected] and [email protected].

Since this issues only occurs in a release candidate of typescript I'll close this. We can't support unstable versions of our dependencies. Please file a new issue if this error re-appears in a stable version of Typescript.

It seems to be actual for typescript 3.5.1, which is the latest stable version for now (together with material-ui 4)

With the 4.0.2 version and ts 3.5.1 I can trigger this error by adding "strictNullChecks": false to my tsconfig.json.

With the 4.0.2 version and ts 3.5.1 I can trigger this error by adding "strictNullChecks": false to my tsconfig.json.

This is not supported by our typings:

Our definitions are tested with the following tsconfig.json. Using a less strict tsconfig.json or omitting some of the libraries might cause errors.

-- https://material-ui.com/guides/typescript/

Every package published under types/ isn't tested with "strictNullChecks": false as well meaning virtually no package supports this configuration.

I’m surprised. I’ve inherited projects with strict:false and never had it generate more errors before.

Since v3.x worked, I assumed that 4.x would too.

Anyway, that note might help others who are reporting this problem, it’s certainly an unexpected cost to upgrading.

There were other issues in 3.x as far as I remember. You either didn't encounter them or already had unsound types. This requirement wasn't introduced with 4.x.

I'm sure that there were and I lucked out.

But, if I take a sample project that compiles fine with strict: true, I don't expect to hit this issue simply by flipping it to strict: false. I don't see how unsound types would have anything to do with that situation.

I don't see how unsound types would have anything to do with that situation.

Has to do with utility types that break with strictNullChecks: false. Without that flag undefined | null can be assigned to any. Those are implementation details though.

This issue needs re-open!

How do I get around this issue for now? If I pass in null, makeStyles throws 'cannot find classes of undefined' error. Sometimes I don't have props to pass, so what do I pass?

@krazyjakee try const c = useStyles({});

@krazyjakee try const c = useStyles({});

Thanks this worked!

I come across this error with typescript 3.7.5.
This const c = useStyles({}); works,
but it inconsistent with the doc:
https://material-ui.com/zh/styles/basics/

FWIW, seeing the same thing. I've tried the suggestions posted here (https://github.com/mui-org/material-ui/issues/16867) with strict and strictNullChecks, but still no dice. Is const c = useStyles({}); "the way" now?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ryanflorence picture ryanflorence  ·  3Comments

ericraffin picture ericraffin  ·  3Comments

TimoRuetten picture TimoRuetten  ·  3Comments

activatedgeek picture activatedgeek  ·  3Comments

revskill10 picture revskill10  ·  3Comments