[typescript] `makeStyles - 'Styles<Theme, StyleProps, "root"...` error

[Magofoco]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I use "@material-ui/core": "4.11.3"

I have a Text.tsx component and its styles are in Text.styles.tsx. I use the makeStyles function to expend Mui styles.

Text.styles.tsx

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

interface StyleProps {
  marginRight: number;
  marginLeft: number;
}

const useStyles = makeStyles((theme: Theme) => {
  return {
    root: {
      marginRight: (props: StyleProps) => theme.spacing(props.marginRight),
      marginLeft: (props: StyleProps) => theme.spacing(props.marginLeft),
    },
    weightBold: {
      fontWeight: theme.typography.fontWeightBold,
    },
    weightSemiBold: {
      fontWeight: theme.typography.fontWeightMedium,
    },
    weightRegular: {
      fontWeight: theme.typography.fontWeightRegular,
    },
    colorWhite: {
      color: theme.palette.background.default,
    },
    underlinedText: {
      textDecoration: 'underline',
    },
    notUnderlinedText: {
      textDecoration: 'none',
    },
  };
});

export default useStyles;

Expected behavior 🤔

The error was not present before yesterday, so I am expecting it not to be there since I have not changed any dependecy.

Steps to reproduce 🕹

Steps:

1. delete node_modules and yarn.lock
2. yarn install
3. yarn start

Context 🔦

package.json

The dependencies I use of MUI are:

    "@material-ui/core": "4.11.3",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri) Binaries: Node: 14.18.1 - /usr/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.15 - /usr/bin/npm Browsers: Chrome: 96.0.4664.110 Firefox: 95.0.1 npmPackages: @types/react: ^17.0.0 => 17.0.38 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ^4.1.2 => 4.5.4 ```

[hbjORbj]

The error was not present before yesterday, so I am expecting it not to be there since I have not changed any dependecy.

We no longer work on v4, so I doubt that the error is from our end. I would recommend you to try migrating to v5 because it is more stable and we actively support it. Here is a migration guide: https://mui.com/guides/migration-v4/#main-content

[hbjORbj]

Please provide a code sandbox so that I can directly see the error and figure out why :)

Try importing createStyles from @material-ui/core and using the following format in the meantime:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
        ....
    },
    ....
  })
);

[Magofoco]

This is the link: https://codesandbox.io/s/hopeful-leftpad-igl5d Line 8 of the Index.styles.ts: const useStyles = makeStyles((theme: Theme) => {...

Interestingly, I have not TS error on codesandbox even if I use the same dependencies.

I deleted my yarn.lock and node_modules in the main repo, but the error persists while it does not appear on codesandbox

[hbjORbj]

I think you need to compare your code sandbox to your repo in terms of versions, code, etc and then try to figure out. I will close this issue as this isn't a bug on MUI side. Typescript linter sometimes gives false positives. Try closing your code editor and opening it again. If it doesn't work, I'd suggest trying git clean -fdx, yarn install and then try again.

[ypresto]

@Magofoco

This is caused by breaking changes in csstype 3.0.9 -> 3.0.10. https://github.com/frenic/csstype/issues/148

You can revert your csstype version to 3.0.9 in package-lock.json (or perhaps you can use Selective Version Resolutions if you use yarn).

It fixed the issue at least in my env.

[Magofoco]

@ypresto Thanks.

However, I do not have CSSTYPE in my package.json

package.json

{
  "name": "my-repo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "4.11.3",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/classnames": "2.2.11",
    "@types/jest": "^26.0.15",
    "@types/material-ui": "0.21.8",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "classnames": "2.2.6",
    "dotenv": "^10.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-jss": "^10.7.1",
    "react-multi-carousel": "^2.6.5",
    "react-scripts": "4.0.3",
    "react-scroll": "^1.8.4",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-router-dom": "^5.1.8",
    "@types/react-scroll": "^1.8.3",
    "react-router-dom": "^5.3.0"
  }
}

[ypresto]

@Magofoco Yes, it is a transitive dependency. It is automatically installed when you install @types/react or @material-ui/core. Then it can be found in your package-lock.json or yarn.lock file.

[Magofoco]

@ypresto

I can find it in my yarn.lock, but how do I know which dependency in package.json to update?

I do not generally push my yarn.lock, so I do not think I have to change it manually. Also it seems I am using csstype@^3.0.2 and csstype@^2.5.2 in my yarn.lock, not csstype 3.0.9 -> 3.0.10

[marcusjwhelan]

I ended up adding fontWeight: theme.typography.fontWeightMedium as number + the createStyles at from the post above to fix my issues. I was going to migrate to V5 but that seemed like a bad move all together.