Styled components using MUI 6.4.2 and react 19 with typescript 5.5.3

[miordache93]

Steps to reproduce

Steps:

1. Create a styled component using the following syntax (tried 2 different ways):
   `

import styled from '@mui/system/styled'; (tried to import it from several places but same result)

const StyledTextField = styled(TextField)(
  ({ theme }) => `
  border-bottom: 1px solid ${theme.colors.grey_10};
`,
);

const StyledTextField = styled(TextField, {
  shouldForwardProp: prop => prop !== 'customProp',
})<TextFieldProps & { customProp?: string }>({
  borderBottom: '2xp solid red',
});
`,
);`

2. When using the styled component try accessing the props definitions. intellisense is no longer working
   and i'm unable to reach type definitions or get suggestions from my IDE (VSCode/Cursor)

If I use the component without styled method it works as before the upgrade.

Current behavior

Expected behavior

Expected behavior comes from unstyled component.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

    "@mui/icons-material": "6.4.2",
    "@mui/material": "6.4.2",
    "@mui/styles": "6.4.2",
    "@mui/system": "6.4.2",
    "@mui/utils": "6.4.2",

Search keywords: styled

[miordache93]

Mui versions:
"@mui/icons-material": "6.4.2",
"@mui/material": "6.4.2",
"@mui/styles": "6.4.2",
"@mui/system": "6.4.2",
"@mui/utils": "6.4.2",

Other packages versions:
"@types/react": "19.0.0",
"@types/node": "18.19.9",
"typescript": "^5.5.3",

[miordache93]

After going again through all the docs available I found this stuff which seems to work now.
Sadly I have to update everywhere in the project. Please let me know if there is another way of fixing this.

[siriwatknp]

After going again through all the docs available I found this stuff which seems to work now.
Sadly I have to update everywhere in the project. Please let me know if there is another way of fixing this.

I don't think you need to do that. I tested with styled-components example and it's working fine without casting.

It might be your tsconfig? If you could share the repo, that will be easier to find the root cause.

[miordache93]

This is my tsconfig together with a custom type def file needed for my custom mui theme.
Maybe that's the one causing the trouble not sure..

{
  "compilerOptions": {
    "composite": true,
    "declarationMap": true,
    "emitDeclarationOnly": true,
    "importHelpers": true,
    "isolatedModules": true,
    "lib": ["es2022", "DOM"],
    "module": "esnext",
    "moduleResolution": "bundler",
    "noEmitOnError": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noUnusedLocals": false,
    "skipLibCheck": true,
    "strict": true,
    "target": "es2022"
   },
  "files": ["./theme.d.ts"]
}

import { COLORS as INITIAL_COLORS } from './lib/colors';
import { FR_COLORS } from './lib/fr-colors';
import { FlattenColors } from './lib/types';

const COLORS = {
  ...INITIAL_COLORS,
  ...FR_COLORS,
};

type FlattenedColorMapping = FlattenColors<typeof COLORS>;

declare module '@emotion/react' {
  interface Theme {
    colors: FlattenedColorMapping;
  }
}

declare module '@mui/material' {
  interface Palette {
    grayBlue: Palette['primary'];
    lightBlue: Palette['primary'];
    lightGreen: Palette['primary'];
    red: Palette['primary'];
    yellow: Palette['yellow'];
    lime: Palette['primary'];
    cyan: Palette['primary'];
    blue: Palette['primary'];
    green: Palette['primary'];
    teal: Palette['primary'];
    purple: Palette['primary'];
    deepPurple: Palette['primary'];
    pink: Palette['primary'];
    indigo: Palette['primary'];
  }

  interface Theme {
    colors: FlattenedColorMapping;

    palette: Palette;
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    colors: FlattenedColorMapping;

    palette: Palette;
  }
}

declare module '@mui/material/styles' {
  interface Palette {
    grayBlue: Palette['primary'];
    lightBlue: Palette['primary'];
    lightGreen: Palette['primary'];
    yellow: Palette['yellow'];
    red: Palette['primary'];
    green: Palette['primary'];
    lime: Palette['primary'];
    cyan: Palette['primary'];
    teal: Palette['primary'];
    blue: Palette['primary'];
    purple: Palette['primary'];
    deepPurple: Palette['primary'];
    pink: Palette['primary'];
    indigo: Palette['primary'];
  }

  interface Theme {
    colors: FlattenedColorMapping;

    palette: Palette;
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    colors: FlattenedColorMapping;

    palette: Palette;
  }

  interface StyledComponent<Props extends object> {
    (props: Props & { children?: ReactNode }): ReactNode;
  }
}

declare module '@mui/material/styles/createTheme' {
  interface Theme {
    colors: FlattenedColorMapping;
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    colors?: FlattenedColorMapping;
  }
}

declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    lime: true;
    purple: true;
  }
}

[megos]

Have you checked this document? It would be helpful.
https://mui.com/material-ui/integrations/styled-components/

1. The @mui/envinfo results show that you may not have @mui/styled-engine-sc installed.
2. There seems to be no paths setting in compilerOptions.

 {
   "compilerOptions": {
+    "paths": {
+      "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
+    }
   },
 }

[miordache93]

@megos Thanks for your reply but unfortunately this didn't work.
I've also did a small update on mui versions

`   
    "@mui/icons-material": "6.4.9",
    "@mui/material": "6.4.9",
    "@mui/styled-engine": "6.4.9",
    "@mui/styles": "6.4.9",
    "@mui/system": "6.4.9",
    "@mui/utils": "6.4.8",
    "@mui/x-data-grid": "^5.17.6",
    "@mui/x-date-pickers": "^5.0.4",
`

[megos]

It looks like @mui/styled-engine-sc is not installed.