0

I faced few issues once I some components in App from Material UI v4 to v5. One of them is that calling of makeStyles() where class props are rendered based on provided props. In another components where makeStyles() is used without getting props it works properly. Below is the code of the componen:

import { TextField } from '@mui/material';
import { TextFieldBackgroundProps } from '../../textfield/text-field';
import { FC } from 'react';
import { makeStyles } from '@mui/material/styles';

const outlinedPadding = makeStyles({
    root: {
        '& label.MuiFormLabel-root': {
            backgroundColor: (
                props: React.PropsWithChildren<TextFieldBackgroundProps>
            ) => props.backgroundcolor ?? '#ffff',
            paddingRight: '5px',
        },
    },
});

type PropsModelType = TextFieldBackgroundProps;
export const BaseInput: FC<PropsModelType> = (props) => {
    const classes = outlinedPadding(props);
    return (
        <TextField
            {...props}
            variant="outlined"
            inputProps={{
                'aria-label':
                    props.inputProps?.['aria-label'] ?? (props.label as string),
                ...props.inputProps,
            }}
            fullWidth
            className={classes.root}
        />
    );
};

Once I hover over "outlingedPadding" from below code:

const classes = outlinedPadding(props);

TS provides this comment : "const outlinedPadding: never This expression is not callable. Type 'never' has no call signatures.ts(2349)"

As I mentioned before, in Material UI v4 everything works well.

regards

marcinb1986
  • 708
  • 1
  • 11
  • 30
  • 1
    `makeStyles` is deprecated in MUI V5. There are many resources you can check to [migrate](https://stackoverflow.com/questions/69263383/what-is-the-alternative-of-makestyles-for-material-ui-v-5) – Jamie_D Jan 08 '22 at 12:50
  • 1
    Also check [this resource](https://mui.com/guides/migration-v4/#mui-material-styles) – Jamie_D Jan 08 '22 at 12:53
  • 1
    You can also try replacing the import with `import { makeStyles } from @mui/styles/makeStyles` , but this is discouraged in V5 – Jamie_D Jan 08 '22 at 12:56
  • it worked perfectly. thanks a lot! I tried to do it with documentation but seems I missed/mixed some parts, thanks for pointing and support ! – marcinb1986 Jan 08 '22 at 20:26

0 Answers0