[useStyles] Prop passing after v5 migration

[cengizcmataraci]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

We are trying to migrate from v4 to v5 and we use a lot of makeStyles and useStyles. We are trying to migrate the style component and apply the styled code mode, but many files are throwing errors. For example, we use useStyles for prop pass, but the code mod using useStyles was deleted, but props remained idle. And naturally the app doesn't compile.

Expected behavior 🤔

We don't know how to use the props we give to useStyles when using styled-component. If we know what we can use instead of use useStyles, we can apply it.

Your environment 🌎

`npx @mui/envinfo`

 System:
    OS: Windows 10 10.0.19043
  Binaries:
    Node: 14.18.0 - C:\Program Files\nodejs\node.EXE        
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD 
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.34)
  npmPackages:
    @emotion/react: ^11.6.0 => 11.6.0 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.55 
    @mui/codemod: ^5.1.1 => 5.1.1 
    @mui/icons-material: ^5.1.1 => 5.1.1 
    @mui/lab: ^5.0.0-alpha.55 => 5.0.0-alpha.55 
    @mui/material: ^5.1.1 => 5.1.1 
    @mui/private-theming:  5.1.1 
    @mui/styled-engine:  5.1.1 
    @mui/styles: ^5.1.1 => 5.1.1 
    @mui/system: ^5.1.1 => 5.1.1 
    @mui/types: ^7.1.0 => 7.1.0 
    @mui/utils:  5.1.1 
    @types/react:  16.9.56 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components:  3.4.10 
    typescript:  3.5.1

[hbjORbj]

Hi. thanks for the report. Can you provide a codesandbox that shows the error directly? You can fork this template. https://codesandbox.io/s/mui-issue-latest-s2dsx

[siriwatknp]

@cengizcmataraci Please provide the full version of the file, so that we can reproduce it.

[cengizcmataraci]

Sure but are you want to before migration file or after migration file?

@cengizcmataraci Please provide the full version of the file, so that we can reproduce it.

[cengizcmataraci]

@cengizcmataraci Please provide the full version of the file, so that we can reproduce it.

I will send before migration file, can you please tell me how i can tranform new way?

Code

import { useMemo, useContext } from 'react';
import { makeStyles } from '@mui/styles';
import { Typography, Card, CardContent, Tooltip } from '@mui/material';
import clsx from 'clsx';
import { VendorHelper } from 'utils/helpers';
import { useBoolean, useQueryString } from 'utils/hooks';
import ResponsiveModal from 'components/ResponsiveModal';
import { DialogContent, IconButton } from '@mui/material';
import MarketplaceFormGenerator from './vendorComponents/marketplaceGenerator';
import CarrierGenerator from './vendorComponents/carrierGenerator';
import { primaryColor } from 'assets/jss/material-kit-pro-react';
import SettingsIcon from '@mui/icons-material/Settings';
import PropTypes from 'prop-types';
import { AuthContext } from 'services/contexts/AuthContext';
import { useTranslation } from 'react-i18next';

const useStyles = (vendorColor, isActiveVendor, hasIntegration, isActive) =>
  makeStyles((theme) => ({
    headerColor: {
      color: '#546E7A',
    },
    activeCard: {
      height: 25,
      marginBottom: hasIntegration ? 14 : 0,
      width: '100%',
      backgroundColor: !isActiveVendor
        ? '#f8f4e8'
        : hasIntegration
        ? isActive
          ? '#4CAF50'
          : '#C6C9C7'
        : 'white',
    },
    settingsIcon: {
      padding: 3,
      float: 'right',
      color: 'white',
    },
    fontSizeSmall: {
      fontSize: 'medium',
    },
    justifyCenter: {
      display: 'flex',
      justifyContent: 'center',
    },
    spaceAround: {
      display: 'flex',
      justifyContent: 'space-around',
      alignItems: 'center',
    },
    paddingTop8: {
      paddingTop: hasIntegration ? 0 : 12,
    },
    lighterText: {
      fontWeight: 400,
    },
    itemCard: {
      width: 130,
      border: 'solid',
      borderRadius: 12,
      backgroundColor: !isActiveVendor && '#f8f4e8',
      borderColor: isActiveVendor
        ? hasIntegration
          ? isActive
            ? '#4CAF50'
            : '#C6C9C7'
          : 'white'
        : '#f8f4e8',
      '&:hover': {
        borderColor: isActiveVendor ? vendorColor : '#f8f4e8',
        cursor: isActiveVendor && 'pointer',
      },
    },
    link: {
      color: primaryColor[0],
      cursor: 'pointer',
    },
    marginTop2: {
      marginTop: theme.spacing(2),
    },
    paddingBottom2: {
      paddingBottom: theme.spacing(10),
    },
    label: {
      marginTop: -12,
      marginLeft: 5,
    },
    beta: {
      fontSize: 10,
      color: '#ff8c00',
    },
    marginLeft: {
      marginLeft: 5,
    },
  }));

const VendorItem = ({ vendor, vendorData }) => {
  const {
    vendorDefinitions,
    vendorColors,
    vendorSmallImages,
    vendorTypeKeys,
    vendorList,
  } = VendorHelper.default;
  const { isBetaUser, isAdmin } = useContext(AuthContext);
  const hasIntegration = !!vendorData && vendorData.id !== 0;
  const isUseable = vendor.isActive && ((vendor.isBeta && isBetaUser) || !vendor.isBeta || isAdmin);
  const isActive = !!vendorData && vendorData.isActive;
  const { t } = useTranslation('views.integrationsPage');

  const vendorQueryString = useQueryString('vendor');
  const modalOpen = useBoolean(
    useQueryString('vendor')?.toLowerCase() === vendor.name.toLowerCase()
  );
  const vendorType = useMemo(
    () =>
      !!vendor
        ? vendor.vendorType
        : vendorList.find((v) => v.name.toLowerCase() === vendorQueryString.toLowerCase())
            .vendorType,
    // eslint-disable-next-line
    [vendor, vendorQueryString]
  );
  const classes = useStyles(
    vendorColors[vendor.id],
    isUseable,
    vendorType === vendorTypeKeys.Carrier && hasIntegration,
    isActive
  )();

  return <>
    <Tooltip
      title={
        isUseable
          ? vendorType === vendorTypeKeys.Carrier && hasIntegration
            ? isActive
              ? t('vendorItem.hasIntegration')
              : t('vendorItem.integrationActive')
            : t('vendorItem.addIntegration')
          : t('vendorItem.improveYet')
      }
    >
      <Card className={classes.itemCard} onClick={() => isUseable && modalOpen.setTrue()}>
        <div className={classes.activeCard}>
          {vendor.isActive && hasIntegration ? (
            <Tooltip title={t('vendorItem.seeSettings')}>
              <IconButton className={classes.settingsIcon} size="large">
                <SettingsIcon className={classes.fontSizeSmall} />
              </IconButton>
            </Tooltip>
          ) : (
            <></>
          )}
        </div>
        <CardContent className={clsx(classes.spaceAround, classes.paddingTop8)}>
          <img
            src={vendorSmallImages[vendor.id]}
            width={vendor.imageWidth}
            alt={vendorDefinitions[vendor.id]}
          />
          {vendor.isShowName ? (
            <Typography
              className={clsx(classes.headerColor, classes.lighterText, classes.marginLeft)}
              variant="h5"
            >
              {vendorDefinitions[vendor.id]}
            </Typography>
          ) : (
            <></>
          )}
          {vendor.isBeta && (isBetaUser || isAdmin) && (
            <span className={classes.label}>
              <b className={classes.beta}>BETA</b>
            </span>
          )}
        </CardContent>
      </Card>
    </Tooltip>
    {modalOpen.value && vendorType && (
      <ResponsiveModal
        open={modalOpen.value}
        onClose={() => modalOpen.setFalse()}
        modalId="integrationModal"
        hasHeader={false}
      >
        <DialogContent>
          <div>
            {vendorType === vendorTypeKeys.Marketplace && (
              <MarketplaceFormGenerator vendorId={vendor.id} />
            )}
            {vendorType === vendorTypeKeys.Carrier && (
              <CarrierGenerator
                vendorId={vendor.id}
                vendorData={vendorData}
                modalOpen={modalOpen}
              />
            )}
          </div>
        </DialogContent>
      </ResponsiveModal>
    )}
  </>;
};

VendorItem.propTypes = {
  vendor: PropTypes.object.isRequired,
  vendorData: PropTypes.object,
};

export default VendorItem;

[cengizcmataraci]

I also get the error "Transformation error (Unexpected token (168:2)) SyntaxError: Unexpected token (168:2)" when I refer to the styled code mode, and another 116 files also get an error.

[mnajdova]

@cengizcmataraci as far as I can see the API you are using is not correct. Check https://mui.com/styles/basics/#adapting-based-on-props

On the other hand, if you wish to adopt to v5, you can use styled() or sx prop, or migrate to tss-react for using an API similar to makeStyles. I hope this helps.