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

Duplicates

• I have searched the existing issues

Latest version

• 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 

[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.

[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