Property 'X' does not exist on type 'Record<never, string>'

[Mohammed-Mounir]

Hello

I'm trying to Migrate from MUI v4 to MUI v5, I'm following those guides:

https://mui.com/material-ui/migration/migration-v4/ https://mui.com/material-ui/migration/migrating-from-jss/#2-use-tss-react

Currently I have issue regarding classes, On some components the classes type I'm getting is Record<never, string> and when I try to use it, I'm getting Property 'X' does not exist on type 'Record<never, string>',

and on other components the classes type is correct.

App.js

import { ThemeProvider } from '@mui/material';
import theme from 'theme';
import CssBaseline from '@mui/material/CssBaseline';
import { Snackbar } from 'utils/snackbar';
import NoConnection from 'utils/NoConnection';
import MainRoutes from 'routes';
import { Provider } from 'react-redux';
import store from 'redux/store';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

export const muiCache = createCache({
  key: 'mui',
  prepend: true,
});

function App() {
  return (
    <Provider store={store}>
      <CacheProvider value={muiCache}>
        <ThemeProvider theme={theme}>
          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <Snackbar>
              <CssBaseline />
              <NoConnection />
              <MainRoutes />
            </Snackbar>
          </LocalizationProvider>
        </ThemeProvider>
      </CacheProvider>
    </Provider>
  );
}

export default App;

[garronej]

Hi @Mohammed-Mounir,
Thanks for reaching out,
You aren't showing me the rellevent bit of your code,
When you get classes as an empty record it's probably that you are calling makeStyles wrong. Show me that.

PS: You can copy paste image and video on GitHub issues, no need to host them somewhere

[Mohammed-Mounir]

Sorry, this is the third or fourth time I'm trying to migrate to MUI v5, each time I get new issue lol

Anyway, in this project each component folder is divided into two files, the component file and style file, the component file is typescript, and the style file is javascript, at the beginning I thought that could be the problem, but then I remembered that other components are working fine, so I'm not sure why I have this issue

Here is the style.js file

import { makeStyles } from 'tss-react/mui';

export default makeStyles()(
  ({ spacing, shadows, shape, palette, breakpoints, mixins, transitions }) => ({
    root: {
      boxShadow: shadows[1],
      borderRadius: shape.borderRadius,
      overflow: 'hidden',
      width: '100%',
    },
    expPanel: {
      boxShadow: 'none',
      '&:not(:last-child)': {
        borderBottom: 0,
      },
      '&:before': {
        display: 'none',
      },
      '&.Mui-expanded': {
        margin: 'auto',
      },
    },
    expPanelSummary: {
      backgroundColor: 'rgb(239 239 244)',
      minHeight: 56,
      borderBottom: 'none',
      '&.Mui-expanded': {
        borderBottom: '1px solid rgba(0, 0, 0, .125)',
      },
      '& .MuiExpansionPanelSummary-content': {
        alignItems: 'center',
        margin: spacing(1.5, 0),
        [breakpoints.up('sm')]: {
          margin: spacing(2, 0),
        },
      },
      '& p': {
        fontWeight: 500,
      },
    },
    expPanelDetails: {
      padding: 0,
      display: 'block',
    },
    brandIcon: {
      minWidth: 'unset',
      color: palette.text.primary,
      marginRight: spacing(1),
      fontSize: '1.9rem',
      [breakpoints.up('sm')]: {
        fontSize: '2.2rem',
      },
      [breakpoints.up('md')]: {
        marginRight: spacing(2),
        fontSize: '2.4rem',
      },
      '& .MuiIcon-root': {
        fontSize: 'inherit',
      },
    },
    list: {
      '&::-webkit-scrollbar-track': {
        backgroundColor: '#fff',
      },
      backgroundColor: 'rgba(0, 0, 25, .05)',
      padding: spacing(1, 0),
      maxHeight: 240,
      transition: 'max-height 600ms',
      transitionTimingFunction: transitions.easing.easeInOut,
      overflow: 'auto',
      ...mixins.scrollbar,
    },
    screensExpanded: {
      paddingRight: 0,
      maxHeight: 500,
      '&::-webkit-scrollbar': {
        width: 0,
      },
    },
    screensList: {
      backgroundColor: '#fff',
      boxShadow:
        'inset 0px 1px 1px -2px rgba(0,0,0,0.2), inset 0px 1px 1px 0px rgba(0,0,0,0.14), inset 0px 1px 3px 0px rgba(0,0,0,0.12)',
    },
    screenIcon: {
      minWidth: spacing(4),
      justifyContent: 'center',
      marginRight: spacing(1.5),
      cursor: 'pointer',
      '&:hover > div': {
        transform: 'scale(1.3)',
      },
      '& > div': {
        transitionProperty: 'transform',
        transitionDuration: transitions.duration.standard,
        transitionTimingFunction: transitions.easing.easeInOut,
      },
    },
    mapsPinBtn: {
      margin: spacing(0, 1),
      padding: spacing(0.5),
      '&.Mui-disabled svg *': {
        fill: palette.action.disabled,
      },
      '& svg': {
        fontSize: '2.4rem',
        height: '1em',
        width: '1em',
      },
    },

    listItemText: {
      '& .MuiListItemText-primary': {
        fontWeight: 500,
      },
      '& .MuiListItemText-secondary': {
        marginRight: spacing(0.75),
        display: 'flex',
        alignItems: 'center',
        '& .MuiSvgIcon-root': {
          fontSize: '1.4rem',
          marginRight: 4,
        },
      },
    },
    screensBtn: {
      display: 'inline-flex',
      minWidth: 0,
      [breakpoints.up('sm')]: {
        '&.MuiButton-outlinedSizeSmall': {
          fontSize: '1.37rem',
        },
        marginRight: spacing(1),
        minWidth: 64,
      },
      '& .MuiButton-endIcon > svg': {
        transitionProperty: 'transform',
        transitionDuration: transitions.duration.shorter,
        transitionTimingFunction: transitions.easing.easeInOut,
      },
    },
    expanded: {
      transform: 'rotate(180deg)',
    },
    selectButton: {
      padding: spacing(1),
      marginRight: spacing(-1),
      '&.Mui-disabled .MuiSvgIcon-root': {
        color: palette.action.disabled,
      },
    },
  }),
);

the component lines are about 380 so I didn't include it.

But I'm importing makeStyles from the style file import useStyles from './styles';

then: const { classes } = useStyles();

BTW thanks for your fast reply!

[JeanGautierSherpas]

Hey, just passing by ! Did you use a custom property transition, in you're MUI theme ?

[Mohammed-Mounir]

You mean accessing the transitions property like this, then yes:

and btw when I comment out the line like the image, it works fine. I don't know how I forgot to mention that.

[JeanGautierSherpas]

Could you pass the configuration of your theme mui ? I believe there is type script missing ... because it seems to works fine for me if I comment this two line :

 screenIcon: {
      minWidth: spacing(4),
      justifyContent: 'center',
      marginRight: spacing(1.5),
      cursor: 'pointer',
      '&:hover > div': {
        transform: 'scale(1.3)',
      },
      '& > div': {
        transitionProperty: 'transform',
        // transitionDuration: transitions.duration.standard,
        transitionTimingFunction: transitions.easing.easeInOut,
      },
    },

and

screensBtn: {
      display: 'inline-flex',
      minWidth: 0,
      [breakpoints.up('sm')]: {
        '&.MuiButton-outlinedSizeSmall': {
          fontSize: '1.37rem',
        },
        marginRight: spacing(1),
        minWidth: 64,
      },
      '& .MuiButton-endIcon > svg': {
        transitionProperty: 'transform',
        // transitionDuration: transitions.duration.shorter,
        transitionTimingFunction: transitions.easing.easeInOut,
      },
    },

[Mohammed-Mounir]

I actually have issues with custom theming and MUI v5,

import { createTheme, responsiveFontSizes } from '@mui/material/styles';
import palette from './palette.theme';
import typography from './typography.theme';
import generic from './generic.theme';
import mixins from './mixins.theme';
// Change the default props of a Material-UI component
import muiDefaultProps from './muiDefaultProps.theme';
// Change every single style injected by Material-UI in an Mui component
import muiStylesOverrides from './muiStylesOverrides.theme';

const theme = createTheme({
  palette,
  typography,
  mixins,
  props: muiDefaultProps,
  overrides: {
    ...muiStylesOverrides,
    MuiCssBaseline: {
      '@global': generic,
    },
  },
  shape: {
    borderRadius: 5.87,
  },
  zIndex: {
    appBar: 1200,
    drawer: 1100,
  },
});

export default responsiveFontSizes(theme);

[garronej]

@Mohammed-Mounir the problem is related to transitionDuration.

Typings says it should be:

But you give it a number.
I don't know, maybe it works if you want you can tell typescript you know what you are doing by doing:

- transitionDuration: transitions.duration.standard
+ transitionDuration: transitions.duration.standard as any
- transitionDuration: transitions.duration.shorter
+ transitionDuration: transitions.duration.shorter as any

Best,

[Mohammed-Mounir]

Okay, Thanks

[garronej]

Please give the project a star if you are using it in prod

[Mohammed-Mounir]

Done

BTW do you know a better guide for mui 5 migration?