Material-UI v5 typescript error when upgrading to rc.0

Question

I just upgraded my material-ui to the v5-rc.0 and am trying to used styled-components. However, in my Component.styles.ts file I'm getting an error:

The inferred type of 'StyledStepper' cannot be named without a reference to '@mui/material/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.

This is my file:

import { styled } from '@mui/material/styles';
import Stepper, { stepperClasses } from '@mui/material/Stepper';
import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
import { stepLabelClasses } from '@mui/material/StepLabel';

export const StyledStepper = styled(Stepper)(({ theme }) => ({
  [`&.${stepperClasses.alternativeLabel}`]: {
    [`.${stepLabelClasses.root}`]: {
      flexDirection: 'column-reverse',
    },
...

Does anyone know what this error means?

Answer 1

I was facing a similar problem when passing a style from another file to sx props

What I found is this I am not sure that it helps but take a look

I had to export every style and as const like this:

export const  logoHeadersContainer= {
    flexDirection: 'column',
    alignItems: 'center',
  } as const;