Material-ui: `CreateCSSProperties` is not assignable to `CSSProperties` after upgrading to `4.3.3`(from v3))

[polll]

Hi,

I have this issue https://github.com/mui-org/material-ui/issues/16198, although it says it's been fixed.

Is there something I'm missing?

Thanks!

[oliviertassinari]

@polll Do you have a reproduction?

[vinay30]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The project fails to compile and gives a Typescript error:

Type 'CreateCSSProperties<{}>' is not assignable to type 'CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)'.
            Type 'CreateCSSProperties<{}>' is not assignable to type '(props: {}) => CreateCSSProperties<{}>'.

Expected Behavior 🤔

No compilation errors.

Steps to Reproduce 🕹

Link to live codesandbox: https://codesandbox.io/embed/create-react-app-with-typescript-s4n6m

But I haven't been able to repro just yet. Standby.

Steps (pending):

1.
2.
3.
4.

Your Environment 🌎

tsconfig

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "build/dist",
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es5",
    "downlevelIteration": true,
    "jsx": "preserve",
    "experimentalDecorators": true,
    "sourceMap": true,
    "skipDefaultLibCheck": true,
    "keyofStringsOnly": true,
    "strict": false,
    "strictNullChecks": false,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "es6",
      "dom"
    ],
    "noImplicitAny": false,
    "types": [
      "node"
    ],
    "typeRoots": [
      "node_modules/@types",
      "typing"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "include": [
    "src"
  ]
}

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.4.2 |
| React | v16.8 |
| Browser | Chrome 76 |
| TypeScript | 3.3.4 |
| etc. | |

[merceyz]

Please provide a full example (follow the issue template), the snippet you included doesn't produce any errors for me.

[vinay30]

Haven't been able to repro in the live sandbox so it could be my local env which I'm currently investigating

[merceyz]

It might be the tsconfig, codesandbox has strict mode, yours doesn't. Give this a quick read and see if it helps https://material-ui.com/guides/typescript/

[oliviertassinari]

Should we close the issue, having no reproduction?

[vinay30]

Hey all, I just thought I'd update this with info about what solved this issue for me.

Turns out I was using 2nd and 3rd level deep imports together in the makeStyles hook. Converting everything to the 3rd level deep import solved it for me.

So basically go from something like this:

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

to:

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

Hope this helps! @oliviertassinari